gpt4 book ai didi

html - 如何获得带有 float 且没有边距的 css 3 列布局?

转载 作者:行者123 更新时间:2023-11-28 16:56:43 25 4
gpt4 key购买 nike

我对 css 不是很有经验,我在尝试使用固定宽度的左右列和动态中间列进行布局时遇到了以下问题。

我能够完成此操作的唯一方法是在中间 div 上使用边距,以避免与侧栏重叠。我想有一种更简洁的方法可以实现这一点,但我还没有找到解决方案。

请在此处查看 jsfiddle,左侧边距右侧没有边距:http://jsfiddle.net/juansg_eng/BCJ6C/119/

HTML
<div class="left">With margin</div>
<div class="right">No margin</div>
<div class="middle"></div>

css
.left { float: left; width: 134px; height: 191px; background-color:#0000ff; opacity: 0.5}
.middle { height: 50px; background-color: #ff0000; margin-left: 134px}
.right { float: right; width: 183px; height: 191px; background-color:#ffff00; opacity:0.5}

谢谢!

最佳答案

flexbox 可以做到这一点。不需要 float 或边距。

* {
margin: 0;
padding: 0;
}
.main {
height: 191px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border: 2px solid green;
}
.main > div {
border: 1px solid grey;
}
.left {
-webkit-box-flex: 0;
-webkit-flex: 0 1 134px;
-ms-flex: 0 1 134px;
flex: 0 1 134px;
background-color: #0000ff;
opacity: 0.5
}
.middle {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
height: 50px;
background-color: #ff0000
}
.right {
-webkit-box-flex: 0;
-webkit-flex: 0 0 183px;
-ms-flex: 0 0 183px;
flex: 0 0 183px;
background-color: #00ff00;
opacity: 0.5
}
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>

关于html - 如何获得带有 float 且没有边距的 css 3 列布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31995106/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com