我已经阅读了一些针对此类问题的不同答案，并研究了一些关于如何修复它的方法，但我觉得我的代码现在可能已经很乱了。我不能让我的 div 并排放置，这样我就可以在它们下面创建另一个更大的 div。我在这方面很新，并且一直在关注教程和类阅读以走到这一步，所以我确信一些相当简单或愚蠢的事情是错误的。我只是想不通:-/。这是 jsfiddle 链接 http://jsfiddle.net/betyB/1/
CSS:
body {
background-image: url(superhighway.jpg);
background-repeat: repeat-x;
background-attachment:scroll;
background-color:#000000;
background-attachment: fixed;
}
#main1 {
position:relative;
z-index:1;
width: 600px;
height: 400px;
background-color:#000;
margin: 5px;
border: solid 4px #323232;
padding: 10px;
overflow:hidden;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#content1 {
position:relative;
z-index:2;
top:-425px;
width: 960px;
height: 800px;
text-align:left;
color:#FFF;
font-weight: bold;
margin: 35px;
}
#main2 {
position:top;
z-index:1;
width: 600px;
height: 400px;
background-color:#000;
border: solid 4px #323232;
padding: 10px;
margin-left:auto;
margin-right:auto;
margin-top:300px;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#content2 {
position:relative;
z-index:2;
top:-425px;
width: 960px;
height: 800px;
text-align:left;
color:#FFF;
font-weight: bold;
margin: 35px;
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Title Here</title>
<link href="MyStyle.css" type="text/css" rel="stylesheet">
<!--
<script language="Javascript" type="text/javascript">
<!--
alert("");
</script>
-->
</head>
<body>
<h1>My Ideal Job</h1>
<div id="main1"></div>
<div id="content1">
This is to test the content of the div.
<li>one</li>
<li>two</li>
<p></p>
<li>a</li>
<li>b</li>
</div>
<div id="main2" style="float:right;margin:0;"></div>
<div id="content2">
Testing number two div.
<li>one</li>
<li>two</li>
<p></p>
<li>a</li>
<li>b</li>
</div>
</body>
</html>
最佳答案
您需要做的第一件事是添加 display: inline-block;属性(property)给你div CSS。其次，您可能需要确保有一个空格(通过仅添加一个空格或添加 如果这还不够，在您的 div 中。
额外信息
定位div它可以非常简单，也可以非常具有挑战性，具体取决于您的实现和您想要实现的目标。大多数时候，一般来说定位 div并排的简单答案是使用 display:inline-block属性(property)。但是，如果您试图将所有内容均匀分布并提供最大数量的跨浏览器支持，则解决方案会变得更加复杂。
看看这个 post 。它很好地描述了定位的挑战和各种解决方案 div与最大的跨浏览器支持并行。该帖子主要关注 div 的均匀间距s，你可以决定做或不做，但它提供了很多你应该知道的重要背景和额外信息。我已经将所描述的解决方案用于十几种实现。
这是该解决方案的代码:
HTML:
<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<span class="stretch"></span>
</div>
CSS:
#container {
border: 2px dashed #444;
height: 125px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
/* just for demo */
min-width: 612px;
}
.box1, .box2, .box3, .box4 {
width: 150px;
height: 125px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
.box1, .box3 {
background: #ccc
}
.box2, .box4 {
background: #0ff
}
这是他提供的 fiddle 的链接:http://jsfiddle.net/EDp8R/3903/
关于css - 无法将我的 div 彼此相邻放置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23314708/