Question

我一直在阅读这类问题的几个不同答案，以及如何解决它的一些研究，但我觉得我的代码可能已经搞砸了。我不能让我的divs彼此相邻，以便我可以在它们下面创建另一个更大的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>

Answer 1

您需要做的第一件事是将display: inline-block;属性添加到div s'CSS中。其次，您可能需要确保存在空格（通过仅添加空格或在  s中添加div，如果这还不够）。

额外信息

定位div可能非常简单，也可能非常具有挑战性，具体取决于您的实施以及您要实现的目标。大多数情况下，当一般性地谈论定位div时，简单的答案是使用display:inline-block属性。但是，如果您尝试均匀地分配所有内容并提供最大量的跨浏览器支持，则解决方案会变得更加复杂。

查看 post 。它提供了一个极好的挑战描述和各种解决方案，以div并排放置最大的跨浏览器支持。帖子主要关注div的均匀间距，您可以决定做或不做，但它提供了许多您应该知道的好背景和额外信息。我已经将所描述的解决方案用于十几个实现。

以下是该解决方案的代码：

<强> 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
}

这是他提供的小提琴的链接：http://jsfiddle.net/EDp8R/3903/

Answer 2

好吧所以我为你制作了这支笔：http://codepen.io/anon/pen/zpxJt它做了我认为你想要的，但是你的html有几个错误，缺少

你不应该这样做做内联样式，我理解你是新手，所以我明白了。如果您的html结构不正确，您想要实现的布局可能很困难。

难以将我的div定位在彼此旁边

2 个答案: