<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
如何创建类似 this link 的 block ？
这是我目前尝试过的:
window.onload = function(){
var height = 0;
var width = 0;
var count_blocks = 0;
width = window.innerWidth;
var h_right_block = document.getElementById('right_block').offsetHeight;
var h_i_right_block = document.getElementById('i_right_block').offsetHeight;
h_i_right_block += 20;
if(h_i_right_block > h_right_block){
var w_Scroll = getScrollBarWidth();
count_blocks = (width - 270 - w_Scroll) / 270;
}else{
count_blocks = (width - 270) / 270;
}
count_blocks = Math.floor(count_blocks);
var diff_width_block = 250 / count_blocks;
diff_width_block = Math.round(diff_width_block);
diff_width_block = 250 - diff_width_block;
//diff_width_block = diff_width_block + "px";
$( '.box' ).css( 'width', diff_width_block );
};
最佳答案
你可以试试这个:jsfiddle url : http://jsfiddle.net/Khumesh/qsbtfhx4/
CSS: 。部分 { 明确:两者； 填充:0px； 边距:0px；
.col {
display: block;
float: left;
margin-right: 2px;
margin-bottom: 2px;
border: 1px solid #000;
}
.col:first-child {
margin-left: 0;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 */
}
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
.span_3_of_3, .span_2_of_3, .span_1_of_3 {
width: 100%;
}
}
HTML:
<div class="section group">
<div class="col span_1_of_3">
This is column 1
</div>
<div class="col span_1_of_3">
This is column 2
</div>
<div class="col span_1_of_3">
This is column 3
</div>
<div class="col span_1_of_3">
This is column 4
</div>
<div class="col span_1_of_3">
This is column 5
</div>
<div class="col span_1_of_3">
This is column 6
</div>
<div class="col span_1_of_3">
This is column 7
</div>
<div class="col span_1_of_3">
This is column 8
</div>
<div class="col span_1_of_3">
This is column 9
</div>
</div>
关于html - 如何创建像抽搐一样的 block ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29161363/