小提琴:https://jsfiddle.net/29xxju45/
CSS:
* {
padding: 0;
margin: 0;
}
body {
padding: 2%;
background: #0000CC;
color: #FFF !important;
}
.minhold {
z-index: 10;
background-color: #ffffff;
padding: 0 !important;
border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #ddd;
margin-top: 6px;
margin-left: 0.4%;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
-moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
opacity: 0.97;
filter: alpha(opacity=97);
width: 99%;
float: left;
}
.dmaxh {
overflow: hidden;
width: 31%;
float: left;
margin: 0 1% 10px 1%;
}
.main-content {
position: relative;
z-index: 10;
background: rgb(71, 194, 243);
padding: 5px 5px 10px 5px;
border-radius: 15px;
border-top-left-radius: 0;
}
即使隐藏了父div(.minhold
),我怎样才能将BOX 3和BOX 4(或任何后续框)放在BOX 2旁边而不转到下一行。< / p>
我希望隐藏任何不适合主容器的额外div,以便我可以使用箭头左右移动。
Aligning multiple divs side by side如果有人想将其标记为重复,我就无法工作。
答案 0 :(得分:1)
创建容器类并在宽度上使用calc
属性...例如:
CSS:
.container {
width: calc(100% / 4);
height: 150px;
padding: 0;
margin: 0;
float: left;
}
HTML:
<div class="minhold">
<div class="container" style="background: red;"></div>
<div class="container" style="background: blue;"></div>
<div class="container" style="background: green;"></div>
<div class="container" style="background: pink;"></div>
</div>
简而言之,每个容器计算它的父宽度并除以4(因为你有4个容器)。如果你想要更多的容器,只需要放5个或更多就可以代替4个。
答案 1 :(得分:1)
答案 2 :(得分:0)
我认为你可以使用FlexModel。
.minhold {
display: flex;
flex-flow: row nowrap;
z-index: 10;
background-color: #ffffff;
padding: 0 !important;
border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #ddd;
margin-top: 6px;
margin-left: 0.4%;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
-moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
opacity: 0.97;
filter: alpha(opacity=97);
width: 99%;
float: left;
}
.dmaxh {
overflow: hidden;
width: 31%;
float: left;
margin: 0 1% 10px 1%;
}
.main-content {
position: relative;
z-index: 10;
background: rgb(71, 194, 243);
padding: 5px 5px 10px 5px;
border-radius: 15px;
border-top-left-radius: 0;
}
.box {
width: 50%;
height: 150px;
background: #990000;
overflow: hidden;
}
<div style="overflow: hidden; width: 100%; margin: -1.6rem 0 0 0;">
<div class="main-content">
<div class="maxh" style="overflow: hidden !important;">
<div class="minhold">
<div class="box" style="background: #009900;">
BOX 1
</div>
<div class="box" style="background: #990000;">
BOX 2
</div>
<div class="box" style="background: #000099;">
BOX 3
</div>
<div class="box" style="background: #999;">
BOX 4
</div>
</div>
</div>
</div>
</div>
答案 3 :(得分:0)
在你的HTML中,你很难将宽度编码到每个div中,并且数学不会检出。如果您要为每个div应用block
课程并应用width: 25%
,那么您将并排放置四个街区。
更新了Fiddled: https://jsfiddle.net/29xxju45/1/