.equalOuterWidth()
Categories: CSS | Dimensions
.equalOuterWidth( [ includeMargin ] )Returns: jQuery
Plugin: jQuery.fn.equalSize
Description: Set the outerWidth of a broadest element in the set of matched elements to each of the set of matched elements.
-
.equalOuterWidth( [ includeMargin ] )
version added: 1.0includeMargin A Boolean indicating whether to include the element's margin in the calculation.
The .equalOuterHeight()
method equals the outerWidth to each of the set of matched elements
to the outerWidth from the the broadest one.
The .equalOuterWidth()
method is related to the .outerWidth()
method.
-
Equal the outerWidth of all div elements.
HTML:
<div class="box_1"></div> <div class="box_2"></div> <div class="box_3"></div>
CSS:
.box_1 { position: absolute, margin: 15px, border: solid 5px, padding: 10px, width: 100px, height: 100px } .box_2 { position: absolute, margin: 30px, border: solid 10px, padding: 20px, width: 200px, height: 200px } .box_3 { position: absolute, margin: 45px, border: solid 15px, padding: 30px, width: 300px, height: 300px }
Code:
$('div').equalOuterWidth();
Results:
<div class="box_1" style="width: 360px;"></div> <div class="box_2" style="width: 330px;"></div> <div class="box_3" style="width: 300px;"></div>
-
Equal the outerWidth of all div elements include the element's margin.
HTML:
<div class="box_1"></div> <div class="box_2"></div> <div class="box_3"></div>
CSS:
.box_1 { position: absolute, margin: 15px, border: solid 5px, padding: 10px, width: 100px, height: 100px } .box_2 { position: absolute, margin: 30px, border: solid 10px, padding: 20px, width: 200px, height: 200px } .box_3 { position: absolute, margin: 45px, border: solid 15px, padding: 30px, width: 300px, height: 300px }
Code:
$('div').equalOuterWidth(true);
Results:
<div class="box_1" style="width: 420px;"></div> <div class="box_2" style="width: 360px;"></div> <div class="box_3" style="width: 300px;"></div>
.equalOuterWidth( [ includeMargin ] )
Subclass: ep
Plugin: ep.fn.equal
Description: Set the outerWidth of a broadest element in the set of matched elements to each of the set of matched elements.
-
.equalOuterWidth( [ includeMargin ] )
version added: 6.11.0includeMargin A Boolean indicating whether to include the element's margin in the calculation.
The .equalOuterHeight()
method equals the outerWidth to each of the set of matched elements
to the outerWidth from the the broadest one.
The .equalOuterWidth()
method is related to the .outerWidth()
method.
-
Equal the outerWidth of all div elements.
HTML:
<div class="box_1"></div> <div class="box_2"></div> <div class="box_3"></div>
CSS:
.box_1 { position: absolute, margin: 15px, border: solid 5px, padding: 10px, width: 100px, height: 100px } .box_2 { position: absolute, margin: 30px, border: solid 10px, padding: 20px, width: 200px, height: 200px } .box_3 { position: absolute, margin: 45px, border: solid 15px, padding: 30px, width: 300px, height: 300px }
Code:
ep('div').equalOuterWidth();
Results:
<div class="box_1" style="width: 360px;"></div> <div class="box_2" style="width: 330px;"></div> <div class="box_3" style="width: 300px;"></div>
-
Equal the outerWidth of all div elements include the element's margin.
HTML:
<div class="box_1"></div> <div class="box_2"></div> <div class="box_3"></div>
CSS:
.box_1 { position: absolute, margin: 15px, border: solid 5px, padding: 10px, width: 100px, height: 100px } .box_2 { position: absolute, margin: 30px, border: solid 10px, padding: 20px, width: 200px, height: 200px } .box_3 { position: absolute, margin: 45px, border: solid 15px, padding: 30px, width: 300px, height: 300px }
Code:
ep('div').equalOuterWidth(true);
Results:
<div class="box_1" style="width: 420px;"></div> <div class="box_2" style="width: 360px;"></div> <div class="box_3" style="width: 300px;"></div>