我正在开发一个水平滚动网站，我正在尝试将 2 个 div 与文本列对齐。
我无法对齐这 2 个 div(第二个在第一个的左下角)并且一些列在 div 之外。
我该如何解决？
HTML:
<body>
<div id="main">
<div id="content">
<div id="article"><!-- columns of text --></div>
<div id="comments"><!-- columns of text --></div>
</div>
</div>
</body>
CSS:
body {
margin: 0;
padding: 0;
color: white;
background: transparent;
}
#main {
position: absolute;
height: 100%;
top: 0;
left: 0;
}
#content {
overflow-x: scroll;
overflow-y: auto;
height: 100%;
top: 0;
left: 0;
background: black;
}
#article {
border: 10px solid yellow;
float: left;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
font-size: 25px;
text-align: left;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-width: 300px;
-moz-column-gap: 40px;
column-width: 300px;
column-gap: 40px;
background: green;
}
#comments {
border: 10px solid red;
float: left;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
font-size: 25px;
text-align: left;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-width: 300px;
-moz-column-gap: 40px;
column-width: 300px;
column-gap: 40px;
background: blue;
}
这是 JSFiddle 演示:http://jsfiddle.net/kz5ch49w/54/
最佳答案
<body>
<div id="main">
<div id="content">
<div id="article"><!-- columns of text --></div>
<div id="comments"><!-- columns of text --></div>
</div>
</div>
</body>
CSS:
body { margin:0; padding:0; color:white; background:transparent;width:auto }
div { position:absolute;margin:1%;}
使用绝对位置并连续计算宽度和左侧位置。所以你可以使用水平滚动。例如:http://jsfiddle.net/kz5ch49w/57/
关于html - 如何水平对齐包含文本列的 2 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28122577/