"плавать: правильно;" против "float: left; margin-left: Ypx" для макета с двумя столбцами, что является лучшей практикой? - PullRequest
Новая
       25

"плавать: правильно;" против "float: left; margin-left: Ypx" для макета с двумя столбцами, что является лучшей практикой?

2 голосов
/ 12 июля 2011

Я создаю макет из 2 столбцов, и мне было интересно, есть ли практическая разница между использованием для второго столбца "float: right;"против "float: left; margin-left: Ypx". 

<html>
<head>
<style type="text/css">
* {
     margin: 0;
     padding: 0;
}

#main {
    width: 900px;
    margin: 0 auto;
}

#right {
    float: left;
    width: 600px;
}

#left {
    float: left;
    width: 280px;
    margin-left: 20px;
}
</style>
</head>
<body>
<div id="main">
  <div id="left">Content of the left column
  </div>
  <div id="right">Content of the right one
  </div>
</div>
</body>
</html>

1 Ответ

1 голос
/ 12 июля 2011

Единственная реальная разница в том, что float right приведет к тому, что div прилипнет к дальнему правому краю контейнера.Это имеет значение, только если ваш контейнер div изменит размер.Некоторые макеты масштабируются с размером окна просмотра браузера или будут динамически изменяться с использованием JavaScript.В вашем случае, у вас статически установленная ширина, поэтому нет никакой разницы между этими двумя методами.

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

...