CSS布局 – 并排alignment两个div
我有一个小问题。 我正在尝试使用CSS并排alignment两个div，但是，我希望将中心div放在页面的水平中央，我使用以下方法实现了这一点：
#page-wrap { margin 0 auto; } 这工作得很好。 第二个div我想定位到中央页面左侧的换行，但我无法设法做到这一点使用浮动，虽然我敢肯定这是可能的。
也许最好的展示我所描述的例子：
布局问题http://pauljarratt.co.ukhttp://img.dovov.comproblemimage.jpg
我想推红色的div与白色div一起。
这里是我关于这两个div的当前CSS，侧边栏是红色的div和分页是白色的div：
#sidebar { width: 200px; height: 400px; background: red; float: left; } #page-wrap { margin: 0 auto; width: 600px; background: #ffffff; height: 400px; }
任何帮助，将不胜感激。
如果你包裹你的div，像这样：
<div id="main"> <div id="sidebar"></div> <div id="page-wrap"></div> </div>
你可以使用这个样式：
#main { width: 800px; margin: 0 auto; } #sidebar { width: 200px; height: 400px; background: red; float: left; } #page-wrap { width: 600px; background: #ffffff; height: 400px; margin-left: 200px; }
虽然这是一个稍微不同的表情，所以我不确定这是你在做什么。 这将以800px为单位居中，而不是以200px为中心的600px 。 基本的做法是你的侧边栏向左浮动，但在主div内，而#page-wrap具有侧边栏的宽度，因为它的左边距可以移动很远。
根据评论更新：对于这种偏离中心的外观，你可以这样做：
<div id="page-wrap"> <div id="sidebar"></div> </div>
有了这个造型：
#sidebar { position: absolute; left: -200px; width: 200px; height: 400px; background: red; } #page-wrap { position: relative; width: 600px; background: #ffffff; height: 400px; margin: 0 auto; }
我不明白为什么尼克使用margin-left: 200px; 而不是将其他div left或right浮动，我只是调整了他的标记，你可以使用float两个元素，而不是使用margin-left 。
演示
#main { margin: auto; width: 400px; } #sidebar { width: 100px; min-height: 400px; background: red; float: left; } #page-wrap { width: 300px; background: #0f0; min-height: 400px; float: left; } .clear:after { clear: both; display: table; content: ""; }
另外，我使用了.clear:after我调用父元素，只是为了自己清除父项。
这可以由风格属性完成。
<!DOCTYPE html> <html> <head> <style> #main { display: flex; } #main div { flex-grow: 0; flex-shrink: 0; flex-basis: 40px; } </style> </head> <body> <div id="main"> <div style="background-color:coral;">Red DIV</div> <div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div> </div> </body> </html>
其结果将是：
享受…请注意：这工作在更高版本的CSS（> 3.0）。
也可以这样做，而不使用wrapper – div＃main。 您可以使用页边距中心＃页面换行：0 auto; 方法，然后使用左侧： – n ; 方法来定位#sidebar并添加＃页面换行的宽度。
body { background: black; } #sidebar { position: absolute; left: 50%; width: 200px; height: 400px; background: red; margin-left: -230px; } #page-wrap { width: 60px; background: #fff; height: 400px; margin: 0 auto; }
但是，如果窗口小于内容，则侧栏会在浏览器视口之外消失。
尼克的第二个答案是最好的，因为它也更容易维护，因为如果你想调整＃页面换行，你不必调整＃侧栏。
最简单的方法是将它们都包装在一个container div和应用margin: 0 auto; 到容器。 这会将#page-wrap和#page-wrap的#sidebar div都居中。 但是，如果您想要偏离中心的外观，则可以将container 200px移到左侧，以考虑#sidebar div的宽度。
HTML代码是三个并排排列的div，也可以通过一些更改来使用两个
<div id="wrapper"> <div id="first">first</div> <div id="second">second</div> <div id="third">third</div> </div>
CSS将会是
#wrapper { display:table; width:100%; } #row { display:table-row; } #first { display:table-cell; background-color:red; width:33%; } #second { display:table-cell; background-color:blue; width:33%; } #third { display:table-cell; background-color:#bada55; width:34%; }
这段代码会调整响应式布局，因为它会resize
<div>
根据设备宽度。 即使一个人都可以沉默
<div>
如
<!--<div id="third">third</div> -->
可以用两个rest两个
<div>
并排。
