Как получить две колонки с плавающей точкой в ​​левом макете для переноса слов? - PullRequest
4 голосов
/ 05 ноября 2011

Мой HTML выглядит так:

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

и мой CSS выглядит так:

.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;
}

Если я изменю размер браузера, чтобы сделать его более тонким, тогда он не будет переносить текст по словам в представлении div вообще. Он просто откроет div вида и поместит его под div nav.

Как сделать так, чтобы текст в представлении div-слова переносился, а не находился в плавающем меню под nav-диваном?

Ответы [ 2 ]

2 голосов
/ 05 ноября 2011

Вы хотите, чтобы ваш .nav div был шириной 200 пикселей, и я предполагаю, что вы хотите 46 пикселей между .nav div и .view div, по крайней мере, это то, что я понимаю из margin-right:46px на .nav див. Вам не нужно плавать .view div. На самом деле, вы не можете этого сделать, потому что если он плавающий, единственный способ получить его рядом с .nav div - это установить ширину (в противном случае он по умолчанию будет равен 100% от своего родителя). Но вы не можете установить ширину, потому что вы хотите, чтобы она увеличивалась и уменьшалась в зависимости от размера браузера.

Так что плавающий не вариант, но и не обязательно. Div .nav плавает, и из-за этого div .view появится под .nav div (потому что плавающие div извлекаются из потока). Чтобы отобразить .view div рядом с .nav div, просто установите margin-left в 246 пикселей (ширина 200 пикселей .nav + поле 46 пикселей).

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

.view {
    margin-left:246px;
}
1 голос
/ 05 ноября 2011

Вам необходимо установить ширину для плавающих элементов, в противном случае они будут принимать до 100% ширины своих контейнеров.

также вы должны очистить ваши плавающие контейнеры.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...