Question

我在搜索中找到了这个并且无法找到答案，或者我不理解它，这可能是一个新手的错误，但我只是没有看到它。基本上我有两列div并排，两者之间有一个相当大的差距...除此之外他们不会排队。之前我让他们彼此相邻，但把它搞砸了。我甚至无法想象问题是什么，所以继承了一些代码（我将制作样式表，所以不要惊慌失措，我知道它需要更多的组织。提前感谢。

     <style type="text/css">
.body_titles {
    padding: 20px;
    font-family: GeosansLight;
    font-size: 18px;
    color: #FFF;
    text-decoration: none;
    width:640px;
}
.body_content {
    padding: 20px;
    font-family: GeosansLight;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    overflow:hidden;
    width:640px;
}
#column_left_container {
    float:left;
    width:640px;
}
#content_tab_top_left {
    background-image:url(../img/container_top.jpg);
    background-repeat:no-repeat;
    height:335px;
    width:640px;
}
#content_tab_center_left {
    background-image:url(../img/container_center.jpg);
    background-repeat:no-repeat;
    height:311px;
    width:640px;
}
#content_tab_bottom_left {
    background-image:url(../img/container_btm.jpg);
    background-repeat:no-repeat;
    height:300px;
    width:640px;
}
#padding_div1 {
    padding:2px;
    width:640;
}
#column_right_container {
    float:right;
    width:300px;
}
.body_titlesRIGHT {
    padding: 20px;
    font-family: GeosansLight;
    font-size: 18px;
    color: #FFF;
    text-decoration: none;
    width:300px;
}
.body_contentRIGHT {
    padding: 20px;
    font-family: GeosansLight;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    overflow:hidden;
    width:300px;
}
#content_tab_top_right {
    background-image:url(../img/container_top.jpg);
    background-repeat:no-repeat;
    height:335px;
    width:300px;
}
#content_tab_center_right {
    background-image:url(../img/container_center.jpg);
    background-repeat:no-repeat;
    width:300px;
}
#content_tab_bottom_right {
    background-image:url(../img/container_btm.jpg);
    background-repeat:no-repeat;
    width:300px;
}
#padding_div2 {
    padding:2px;
    width:300px;
}
</style>
<div id="body_container"> 
    <div id="columnn_left_container" style="display:inline-block">
        <div id="content_tab_top_left"> 
          <div class="body_titles">
            Title
          </div>
                <div class="body_content">
                    Content
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Tests<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    <br />
                </div>
              </div>
            </div>
     <div id="content_tab_center_left">
            <div id="padding_div1"></div>
          <div class="body_titles">
            Title
          </div>
       <div class="body_content">
                    Content
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Tests<br />
                    Test<br />
           Test<br />
                    Test<br />
                </div>
     </div>
    <div id="content_tab_bottom_left">
          <div class="body_titles">
            Title
          </div>
                <div class="body_content">
                    Content
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Tests<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
            </div>
        </div>
     </div>
        <div id="column_right_container" style="display:inline-block">
               <div id="content_tab_top_right">
                  <div class="body_titlesRIGHT">
                    Title
                    </div>
                <div class="body_contentRIGHT">
                    Content
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Tests<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    Test<br />
                    <br />
                </div>
         </div>
             <div id="content_tab_center_right">
                    <div id="padding_div2"></div>
                  <div class="body_titlesRIGHT">
                    Title
                  </div>
                        <div class="body_contentRIGHT">
                            Content
                            Test<br />
                            Test<br />
                            Test<br />
                            Test<br />
                            Test<br />
                            Tests<br />
                            Test<br />
                            Test<br />
                            Test<br />
                            <br />
                            <br />
                        </div>
            <div id="content_tab_bottom_right">
                  <div class="body_titlesRIGHT">
                    Title
                  </div>
                        <div class="body_contentRIGHT">
                            Content
                            Test<br />
                            Test<br />
                            Test<br />
                            Test<br />
                            Test<br />
                            Tests<br />
                            Test<br />
                            Test<br />
                            Test<br />
                            Test<br />
                            Test<br />
                    </div>
                </div>
             </div>
        </div>  
  </div>

Answer 1

首先，你的

<div id="columnn_left_container" style="display:inline-block">

在列部分

中有nn

将其更改为

<div id="column_left_container" style="display:inline-block">

Answer 2

嗯，你有div#body_container作为块级元素，这意味着它会拉伸以填充其水平空间的100％。作为其中的兄弟姐妹，您div#column_right_container width 300px的{{1}}。 div#column_right_container将float正确，位于 div#body_container下方，因为div#body_container未展开或内联。

Answer 3

我不太确定你想要对齐什么。如果您希望column_right_container <div>位于body_container旁边，那么您需要做的就是将float: right;添加到body_container容器中。（重新订购它们会改变哪一个更正确）

目前body_container未浮动，因此默认使用整个页面宽度。浮动它会为旁边的另一个<div>留出空间。如果你还没有使用它，我建议使用Firebug。它允许您逐个关闭样式，以查看哪些影响您的元素。

希望有所帮助。

Answer 4

如果您希望2列（#column_left_container和#column_right_container）折叠（并排），则需要将两列向左浮动（或更改您的订单并向右浮动）。 margin-left: 20px;你有一个column_right_container，所以除非你删除它，否则你总是会有间隙（如果这就是你想要的）。

作为替代方案，您可能希望对position:relative和{{#body_container的两列使用position:absolute和left:n的职位#column_left_container 1}}代表left:n+640px。

两个div之间的巨大差距，div不会彼此相邻。

4 个答案: