如何在另一个div中水平放置两个div

时间：2021-08-14 11:59:21

I haven't played with CSS for too long a time and am without references at the moment. My question should be fairly easy but googling isn't bringing up a sufficient answer. So, adding to the collective knowledge...

我没有玩过很长时间的CSS，而且目前还没有参考。我的问题应该相当容易，但谷歌搜索没有提出足够的答案。所以，增加集体知识......

|#header---------------------------------------------------------------|
|                               TITLE                                  |
|#sub-title------------------------------------------------------------|
|bread > crumb                    |                  username logout   |
|#sub-left                        |                          #sub-right|
|---------------------------------|------------------------------------|

That's what I'm wanting my layout to be. The heading anyways. I wanted sub-title to contain sub-left AND sub-right. What css rules do I use to ensure a div is bound by the attributes of another div. In this case, how do I ensure that sub-left and sub-right stay within sub-title?

这就是我想要的布局。反正的标题。我希望子标题包含子左和右子。我使用什么css规则来确保div受另一个div的属性约束。在这种情况下，如何确保子左和右子留在子标题内？

13 个解决方案

#1

65  

Its quite a common misconception that you need a clear:both div at the bottom, when you really don't. While foxy's answer is correct, you don't need that non-semantic, useless clearing div. All you need to do is stick an overflow:hidden onto the container:

它是一个很常见的误解，你需要一个明确的：底部的div，当你真的没有。虽然foxy的答案是正确的，但您不需要那种非语义，无用的清算div。你需要做的就是坚持溢出：隐藏在容器上：

#sub-title { overflow:hidden; }

#2

36  

When you float sub-left and sub-right they no longer take up any space within sub-title. You need to add another div with style = "clear: both" beneath them to expand the containing div or they appear below it.

当您向左浮动和向右浮动时，它们不再占用子标题内的任何空间。你需要在它们下面添加另一个带有style =“clear：both”的div来扩展包含div或它们出现在它下面。

HTML:

HTML：

<div id="sub-title">
   <div id="sub-left">
      sub-left
   </div>
   <div id="sub-right">
      sub-right
   </div>
   <div class="clear-both"></div>
</div>

CSS:

CSS：

#sub-left {
   float: left;
}
#sub-right {
   float: right;
}
.clear-both {
   clear: both;
}

#3

9  

This should do what you are looking for:

这应该做你想要的：

<html>
    <head>
        <style type="text/css">
            #header {
                text-align: center;
            }
            #wrapper {
                margin:0 auto;
                width:600px;
            }
            #submain {
                margin:0 auto;
                width:600px;
            }
            #sub-left {
                float:left;
                width:300px;
            }
            #sub-right {
                float:right;
                width:240px;
                text-align: right;
            }
        </style>

    </head>
    <body>
        <div id="wrapper">
            <div id="header"><h1>Head</h1></div>
            <div id="sub-main">
                <div id="sub-left">
                    Right
                </div>
                <div id="sub-right">
                    Left
                </div>
            </div>
        </div>
    </body>
</html>

And you can control the entire document with the wrapper class, or just the two columns with the sub-main class.

您可以使用包装器类控制整个文档，也可以使用子主类控制整个文档。

#4

9  

I agree with Darko Z on applying "overflow: hidden" to #sub-title. However, it should be mentioned that the overflow:hidden method of clearing floats does not work with IE6 unless you have a specified width or height. Or, if you don't want to specify a width or height, you can use "zoom: 1":

我同意Darko Z对“sub：title”应用“overflow：hidden”。但是，应该提到的是，除非你有指定的宽度或高度，否则清除浮动的overflow：hidden方法对IE6不起作用。或者，如果您不想指定宽度或高度，可以使用“zoom：1”：

#sub-title { overflow:hidden; zoom: 1; }

#5

5  

This answer adds to the solutions above to address your last sentence that reads:

这个答案增加了上面的解决方案来解决你的最后一句话：

how do I ensure that sub-left and sub-right stay within sub-title

如何确保子左和右子保持在子标题内

The problem is that as the content of sub-left or sub-right expands they will extend below sub-title. This behaviour is designed into CSS but does cause problems for most of us. The easiest solution is to have a div that is styled with the CSS Clear declaration.

问题在于，随着子左或右子的内容扩展，它们将扩展到副标题以下。此行为是针对CSS设计的，但确实会给我们大多数人带来问题。最简单的解决方案是使用CSS Clear声明设置div。

To do this include a CSS statement to define a closing div (can be Clear Left or RIght rather than both, depending on what Float declarations have been used:

要做到这一点，请包含一个CSS语句来定义一个结束div（可以是Clear Left或RIght而不是两者，具体取决于使用的Float声明：

#sub_close {clear:both;}

And the HTML becomes:

HTML变成：

<div id="sub-title">
<div id="sub-left">Right</div>
<div id="sub-right">Left</div>
<div id="sub-close"></div>
</div>

Sorry, just realized this was posted previously, shouldn't have made that cup of coffee while typing my reply!

对不起，刚刚意识到这是以前发布的，在输入我的回复时不应该制作那杯咖啡！

@Darko Z: you are right, the best description for the overflow:auto (or overflow:hidden) solution that I have found was in a a post on SitePoint a while ago Simple Clearing of FLoats and there is also a good description in a 456bereastreet article CSS Tips and Tricks Part-2. Have to admit to being too lazy to implement these solutions myself, as the closing div cludge works OK although it is of course very inelegant. So will make an effort from now on to clean up my act.

@Darko Z：你是对的，我发现的溢出的最佳描述：auto（或溢出：隐藏）解决方案是在SitePoint上发布的一个帖子前一段时间简单清除FLoats并且在456bereastreet中也有很好的描述文章CSS提示和技巧第2部分。不得不承认自己懒得自己实施这些解决方案，因为关闭的div cludge工作正常，虽然它当然非常不优雅。因此，从现在开始努力清理我的行为。

#6

3  

Seriously try some of these, you can choose fixed width or more fluid layouts, the choice is yours! Really easy to implement too.

认真尝试其中的一些，你可以选择固定宽度或更流畅的布局，选择是你的！真的很容易实现。

IronMyers Layouts

more more more

#7

0  

You can also achieve this using a CSS Grids framework, such as YUI Grids or Blue Print CSS. They solve alot of the cross browser issues and make more sophisticated column layouts possible for use mere mortals.

您也可以使用CSS Grids框架实现此目的，例如YUI Grids或Blue Print CSS。它们解决了很多跨浏览器问题，并且可以使用更复杂的列布局来使用凡人。

#8

0  

Best and simple approach with css3

使用css3的最佳和简单的方法

#subtitle{
/*for webkit browsers*/
     display:-webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack: center;
     width:100%;
}

#subleft,#subright{
     width:50%;
}

#9

-1  

Something like this perhaps...

这样的事也许......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            #container
            {
                width:600px;
            }

            #head, #sub-title
            {
                width:100%;
            }

            #sub-left, #sub-right
            {
                width:50%;
                float:left;
            }

        </style>
    </head>

    <body>
        <div id="container">
            <div id="head">
                 #head
            </div>
            <div id="sub-title">
                #sub-title
                <div id="sub-left">
                    #sub-left
                </div>

                <div id="sub-right">
                    #sub-right
                </div>
            </div>
        </div>
    </body>
</html>

#10

-1  

Instead of using overflow:hidden, which is a kind of hack, why not simply setting a fixed height, e.g. height:500px, to the parent division?

而不是使用overflow：hidden，这是一种hack，为什么不简单地设置一个固定的高度，例如身高：500px，到父母师？

#11

-1  

#sub-left, #sub-right
{
    display: inline-block;
}

#12

-1  

Via Bootstrap Grid, you can easily get the cross browser compatible solution.

通过Bootstrap Grid，您可以轻松获得跨浏览器兼容的解决方案。

<div class="container">     
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
      Div1       
    </div>
    <div class="col-sm-6" style="background-color:lavenderblush;">
          Div2
    </div>
  </div>
</div>

jsfiddle: http://jsfiddle.net/DTcHh/4197/

jsfiddle：http：//jsfiddle.net/DTcHh/4197/

#13

-6  

You do it like this:

你这样做：

<table>
   <tr>
      <td colspan="2">TITLE</td>
   </tr>
   <tr>
      <td>subleft</td><td>subright</td>
   </tr>
</table>

EASY - took me 1 minute to type it. Remember the CSS file needs to be downloaded to the client, so don't worry about the waffle about extra tags, its irrelavent in this instance.

很容易 - 我花了1分钟打字。记住需要将CSS文件下载到客户端，所以不要担心有关额外标签的问题，在这个例子中它是无关紧要的。

#1

65  

Its quite a common misconception that you need a clear:both div at the bottom, when you really don't. While foxy's answer is correct, you don't need that non-semantic, useless clearing div. All you need to do is stick an overflow:hidden onto the container:

它是一个很常见的误解，你需要一个明确的：底部的div，当你真的没有。虽然foxy的答案是正确的，但您不需要那种非语义，无用的清算div。你需要做的就是坚持溢出：隐藏在容器上：

#sub-title { overflow:hidden; }

#2

36  

When you float sub-left and sub-right they no longer take up any space within sub-title. You need to add another div with style = "clear: both" beneath them to expand the containing div or they appear below it.

当您向左浮动和向右浮动时，它们不再占用子标题内的任何空间。你需要在它们下面添加另一个带有style =“clear：both”的div来扩展包含div或它们出现在它下面。

HTML:

HTML：

<div id="sub-title">
   <div id="sub-left">
      sub-left
   </div>
   <div id="sub-right">
      sub-right
   </div>
   <div class="clear-both"></div>
</div>

CSS:

CSS：

#sub-left {
   float: left;
}
#sub-right {
   float: right;
}
.clear-both {
   clear: both;
}

#3

9  

This should do what you are looking for:

这应该做你想要的：

<html>
    <head>
        <style type="text/css">
            #header {
                text-align: center;
            }
            #wrapper {
                margin:0 auto;
                width:600px;
            }
            #submain {
                margin:0 auto;
                width:600px;
            }
            #sub-left {
                float:left;
                width:300px;
            }
            #sub-right {
                float:right;
                width:240px;
                text-align: right;
            }
        </style>

    </head>
    <body>
        <div id="wrapper">
            <div id="header"><h1>Head</h1></div>
            <div id="sub-main">
                <div id="sub-left">
                    Right
                </div>
                <div id="sub-right">
                    Left
                </div>
            </div>
        </div>
    </body>
</html>

And you can control the entire document with the wrapper class, or just the two columns with the sub-main class.

您可以使用包装器类控制整个文档，也可以使用子主类控制整个文档。

#4

9  

I agree with Darko Z on applying "overflow: hidden" to #sub-title. However, it should be mentioned that the overflow:hidden method of clearing floats does not work with IE6 unless you have a specified width or height. Or, if you don't want to specify a width or height, you can use "zoom: 1":

我同意Darko Z对“sub：title”应用“overflow：hidden”。但是，应该提到的是，除非你有指定的宽度或高度，否则清除浮动的overflow：hidden方法对IE6不起作用。或者，如果您不想指定宽度或高度，可以使用“zoom：1”：

#sub-title { overflow:hidden; zoom: 1; }

#5

5  

This answer adds to the solutions above to address your last sentence that reads:

这个答案增加了上面的解决方案来解决你的最后一句话：

how do I ensure that sub-left and sub-right stay within sub-title

如何确保子左和右子保持在子标题内

The problem is that as the content of sub-left or sub-right expands they will extend below sub-title. This behaviour is designed into CSS but does cause problems for most of us. The easiest solution is to have a div that is styled with the CSS Clear declaration.

问题在于，随着子左或右子的内容扩展，它们将扩展到副标题以下。此行为是针对CSS设计的，但确实会给我们大多数人带来问题。最简单的解决方案是使用CSS Clear声明设置div。

To do this include a CSS statement to define a closing div (can be Clear Left or RIght rather than both, depending on what Float declarations have been used:

要做到这一点，请包含一个CSS语句来定义一个结束div（可以是Clear Left或RIght而不是两者，具体取决于使用的Float声明：

#sub_close {clear:both;}

And the HTML becomes:

HTML变成：

<div id="sub-title">
<div id="sub-left">Right</div>
<div id="sub-right">Left</div>
<div id="sub-close"></div>
</div>

Sorry, just realized this was posted previously, shouldn't have made that cup of coffee while typing my reply!

对不起，刚刚意识到这是以前发布的，在输入我的回复时不应该制作那杯咖啡！

@Darko Z: you are right, the best description for the overflow:auto (or overflow:hidden) solution that I have found was in a a post on SitePoint a while ago Simple Clearing of FLoats and there is also a good description in a 456bereastreet article CSS Tips and Tricks Part-2. Have to admit to being too lazy to implement these solutions myself, as the closing div cludge works OK although it is of course very inelegant. So will make an effort from now on to clean up my act.

@Darko Z：你是对的，我发现的溢出的最佳描述：auto（或溢出：隐藏）解决方案是在SitePoint上发布的一个帖子前一段时间简单清除FLoats并且在456bereastreet中也有很好的描述文章CSS提示和技巧第2部分。不得不承认自己懒得自己实施这些解决方案，因为关闭的div cludge工作正常，虽然它当然非常不优雅。因此，从现在开始努力清理我的行为。

#6

3  

Seriously try some of these, you can choose fixed width or more fluid layouts, the choice is yours! Really easy to implement too.

认真尝试其中的一些，你可以选择固定宽度或更流畅的布局，选择是你的！真的很容易实现。

IronMyers Layouts

more more more

#7

0  

You can also achieve this using a CSS Grids framework, such as YUI Grids or Blue Print CSS. They solve alot of the cross browser issues and make more sophisticated column layouts possible for use mere mortals.

您也可以使用CSS Grids框架实现此目的，例如YUI Grids或Blue Print CSS。它们解决了很多跨浏览器问题，并且可以使用更复杂的列布局来使用凡人。

#8

0  

Best and simple approach with css3

使用css3的最佳和简单的方法

#subtitle{
/*for webkit browsers*/
     display:-webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack: center;
     width:100%;
}

#subleft,#subright{
     width:50%;
}

#9

-1  

Something like this perhaps...

这样的事也许......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            #container
            {
                width:600px;
            }

            #head, #sub-title
            {
                width:100%;
            }

            #sub-left, #sub-right
            {
                width:50%;
                float:left;
            }

        </style>
    </head>

    <body>
        <div id="container">
            <div id="head">
                 #head
            </div>
            <div id="sub-title">
                #sub-title
                <div id="sub-left">
                    #sub-left
                </div>

                <div id="sub-right">
                    #sub-right
                </div>
            </div>
        </div>
    </body>
</html>

#10

-1  

Instead of using overflow:hidden, which is a kind of hack, why not simply setting a fixed height, e.g. height:500px, to the parent division?

而不是使用overflow：hidden，这是一种hack，为什么不简单地设置一个固定的高度，例如身高：500px，到父母师？

#11

-1  

#sub-left, #sub-right
{
    display: inline-block;
}

#12

-1  

Via Bootstrap Grid, you can easily get the cross browser compatible solution.

通过Bootstrap Grid，您可以轻松获得跨浏览器兼容的解决方案。

<div class="container">     
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
      Div1       
    </div>
    <div class="col-sm-6" style="background-color:lavenderblush;">
          Div2
    </div>
  </div>
</div>

jsfiddle: http://jsfiddle.net/DTcHh/4197/

jsfiddle：http：//jsfiddle.net/DTcHh/4197/

#13

-6  

You do it like this:

你这样做：

<table>
   <tr>
      <td colspan="2">TITLE</td>
   </tr>
   <tr>
      <td>subleft</td><td>subright</td>
   </tr>
</table>

EASY - took me 1 minute to type it. Remember the CSS file needs to be downloaded to the client, so don't worry about the waffle about extra tags, its irrelavent in this instance.

很容易 - 我花了1分钟打字。记住需要将CSS文件下载到客户端，所以不要担心有关额外标签的问题，在这个例子中它是无关紧要的。

标签：

相关文章