作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在一个 div 中有 5 个 div,我会让它在左边 float 2 个,在右边 float 3 个:
.container {
height: 400px;
border: 1px solid black;
}
.first, .second, .third, .fourth, .fifth {
width: 50%;
}
.first {
height: 300px;
background-color: red;
float: left;
}
.second {
height: 100px;
background-color: blue;
float: left;
}
.third {
height: 100px;
background-color: green;
float: right;
}
.fourth {
height: 200px;
background-color: yellow;
float: right;
}
.fifth {
height: 100px;
background-color: aquamarine;
float: right;
}
<div class="container">
<div class="first"> FIRST </div>
<div class="second"> SECOND </div>
<div class="third"> THIRD </div>
<div class="fourth"> FOURTH</div>
<div class="fifth"> FIFTH </div>
</div>
我希望它们被放置在:
FIRST and SECOND at left
THIRD, FORTH and FIFTH at right.
Instead, they are placed like:
FIRST and FIFTH at left
SECOND, THIRD and FOURTH at right.
你知道怎么解决吗?这是我的代码:https://jsfiddle.net/82bkdbpn/
最佳答案
因为您已经在 container
元素上定义了固定高度,您可以使用 Flexbox 来执行此操作并定义 flex-direction: column
。
.container {
height: 400px;
border: 1px solid black;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.first, .second, .third, .fourth, .fifth {
width: 50%;
height: 100px;
}
.first {
height: 300px;
background-color: red;
}
.fourth {
height: 200px;
background-color: yellow;
}
.second {background-color: blue;}
.third {background-color: green;}
.fifth {background-color: aquamarine;}
<div class="container">
<div class="first"> FIRST </div>
<div class="second"> SECOND </div>
<div class="third"> THIRD </div>
<div class="fourth"> FOURTH</div>
<div class="fifth"> FIFTH </div>
</div>
关于html - Div 不像我想的那样 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46885426/
使用登录后,我想吐出用户名。 但是,当我尝试单击登录按钮时, 它给了我力量。 我看着logcat,但是什么也没显示。 这种编码是在说。 它将根据我在登录屏幕中输入的名称来烘烤用户名。 不会有任何密码。
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎是题外话,因为它缺乏足够的信息来诊断问题。 更详细地描述您的问题或include a min
我是一名优秀的程序员,十分优秀!