发表新帖
发表新帖

How to position two divs horizontally within another div

前端 未结
关注
13 995
悲哀的现实
悲哀的现实 2020-12-12 11:12

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

相关标签:
13条回答
  • 迷失自我
    2020-12-12 11:18

    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>
    0 讨论(0)
  • 礼貌的吻别
    2020-12-12 11:19

    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?

    0 讨论(0)
  • 走了就别回头了
    2020-12-12 11:19

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

    <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/

    0 讨论(0)
  • 南笙
    2020-12-12 11:22 
    #sub-left, #sub-right
{
    display: inline-block;
}
    0 讨论(0)
  • 傲寒
    2020-12-12 11:24

    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":

    #sub-title { overflow:hidden; zoom: 1; }
    0 讨论(0)
  • 清歌不尽
    2020-12-12 11:25

    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.

    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:

    #sub-left {
   float: left;
}
#sub-right {
   float: right;
}
.clear-both {
   clear: both;
}
    0 讨论(0)
 看不清?
提交回复
热议问题