CSS container doesn't stretch to accommodate f

2020-02-11 21:35发布

站内问答 / HTML/CSS
1143 7 6 

<html>

<head>

<style type="text/css">

  .container {
      width: 900px;
      border: 2px solid #333333;
      padding-top: 30px;
      padding-bottom: 30px;
  }

  .container_left {
      border: 2px solid #FF00FF;
      width: 650px;
      float: left;
  }

  .container_right {
      border: 2px solid #0000FF;
      width: 225px;
      float: right;
  }

</style>
</head>

<body>

    <div class="container">
        <div class="container_left">
        <div>LEFT CONTAINER</div>
        <div>LEFT CONTAINER</div>
        <div>LEFT CONTAINER</div>
        </div>

        <div class="container_right">
        <div>RIGHT CONTAINER</div>
        <div>RIGHT CONTAINER</div>
        <div>RIGHT CONTAINER</div>
        </div>
    </div>

</body>
</html>

The result is:
result

I want a result like this:
desired result

7条回答
▲ chillily
2楼-- · 2020-02-11 21:57

to the outer div you might want to use the clearfix css, explained here: http://www.positioniseverything.net/easyclearing.html

查看更多
0人赞 添加讨论(0) 举报
做自己的国王
3楼-- · 2020-02-11 22:04

Give the container a 

overflow: auto

or

overflow: hidden

see this page on quirksmode.org for details on the issue.

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
4楼-- · 2020-02-11 22:13

One option is to put in a <div style="clear: both;"></div> just before closing the container div.

<div class="container">

    <div class="container_left">
    <div>LEFT CONTAINER</div>
    <div>LEFT CONTAINER</div>
    <div>LEFT CONTAINER</div>
    </div>

    <div class="container_right">
    <div>RIGHT CONTAINER</div>
    <div>RIGHT CONTAINER</div>
    <div>RIGHT CONTAINER</div>
    </div>

    <div style="clear: both;"></div>

</div>
查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
5楼-- · 2020-02-11 22:14 
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clear { height: 1%; }
*:first-child+html .clear { min-height: 1px; }

Apply .clear to your parent element.

查看更多
0人赞 添加讨论(0) 举报
走好不送
6楼-- · 2020-02-11 22:15

A quick fix is to add overflow: hidden to your .container.

This is not the best solution per say, merely the quickest fix. Your best solution would be to implement and apply clearfix as it doesn't have issues with printing due to overflow.

In the event you use overflow: auto or overflow: hidden and a user attempts to print the page, content that does not fit on the printed page will be clipped because:

  1. scroll-bars do not print
  2. hidden content does not display
查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
7楼-- · 2020-02-11 22:15

This might be of help "Clearing a float container"

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)