发表新帖
发表新帖

how to make a div to wrap two float divs inside?

后端 未结
关注
11 2164
野趣味
野趣味 2020-12-07 15:40

I don\'t know if it\'s a common problem, but I can\'t find the solution in web so far. I would like to have two divs wrapped inside another div, however these two divs insid

相关标签:
11条回答
  • 生来不讨喜
    2020-12-07 16:05

    Float everything.

    If you have a floated div inside a non-floated div, everything gets all screwy. That's why most CSS frameworks like Blueprint and 960.gs all use floated containers and divs.

    To answer your particular question,

    <div class="container">
<!--
.container {
  float: left;
  width: 100%;
}
-->
  <div class="sidebar">
  <!--
  .sidebar {
    float: left;
    width: 20%;
    height: auto;
  }
  -->
  </div>
  <div class="content">
  <!--
  .sidebar {
    float: left;
    width: 20%;
    height: auto;
  }
  -->
  </div>
</div>

    should work just fine, as long as you float:left; all of your <div>s.

    0 讨论(0)
  • 忘掉有多难
    2020-12-07 16:05

    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-07 16:06

    This should do it:

    <div id="wrap">
  <div id="nav"></div>
  <div id="content"></div>
  <div style="clear:both"></div>
</div>
    0 讨论(0)
  • 庸人自扰
    2020-12-07 16:17 
    <html>
<head>
    <style>
        #main { border: 1px #000 solid; width: 600px; height: 400px; margin: auto;}
        #one { width: 20%; height: 100%; background-color: blue; display: inline-block; }
        #two { width: 80%; height: 100%; background-color: red; display: inline-block; }
    </style>
</head>
<body>
<div id="main">
    <span id="one">one</span><span id="two">two</span>
</div>
</body>
</html>

    The secret is the inline-block. If you use borders or margins, you may need to reduce the width of the div that use them.

    NOTE: This doesn't work properly in IE6/7 if you use "DIV" instead of "SPAN". (see http://www.quirksmode.org/css/display.html)

    0 讨论(0)
  • 攒了一身酷
    2020-12-07 16:18

    Use this CSS hack, it saved me lot of trouble and time.

    http://swiftthemes.com/2009/12/css-tips-and-hacks/problem-with-height-of-div-containing-floats-and-inline-lists/

    I use it in every project.

    0 讨论(0)
 看不清?
提交回复
热议问题