How to get two column float left div layout to word wrap?

2018-07-01 17:32:51

My HTML looks like this:

<body>
  <div class="nav"><ul>...</ul></div>
  <div class="view">this text won't wrap if I resize browser</div>
</body>

and my CSS looks like this:

.nav {
    width:200px;
    float:left;
    font-weight:bold;
    margin-right:46px;
}

.nav a {
    font-weight:normal;
}

.nav ul {
    padding:0;
    margin:0;
    list-style-type:none;
    text-align:right;
}

.nav ul li {
    margin-bottom:7px;
}

.view {
    float:left;
}

If I resize the browser to be skinnier, then it won't word wrap the text in the view div at all. It will just un-float the view div and put it below the nav div.

How can I make the text in the view div word wrap instead of un-float to under the nav div?

You want your .nav div to be 200 pixels wide and I assume you want 46 pixels between the .nav div and the .view div, at least that's what I understand from the margin-right:46px on the .nav div. You don't need to float the .view div. In fact, you can't because if it's floated, the only way to get it next to the .nav div is to set a width (otherwise it will default to 100% of it's parent). But you can't set the width because you want it to grow and shrink with the size of the browser.

So floating is not an option but also not necessary. The .nav div is floated and because of this the .view div will appear underneath the .nav div (because floated div's are taken out of the flow). To make the .view div appear next to the .nav div you simply set a margin-left of 246 pixels (200px width of .nav + 46px margin).

.nav {
    width:200px;
    float:left;
}

.view {
    margin-left:246px;
}

You need to set a width on floated elements, otherwise they will take UP TO 100% width of their containers.

also, you should clear your float containers.

链接地址: http://www.djcxy.com/p/88474.html

上一篇: 列左浮动布局具有相等的左右边距

下一篇: 如何获得两列浮动左div版面来自动换行？