Реализуйте этот макет, используя CSS float: left и float: right или CSS margin-left и position: absolute? - PullRequest
Новая
       43

Реализуйте этот макет, используя CSS float: left и float: right или CSS margin-left и position: absolute?

10 голосов
/ 23 февраля 2011

Я хочу разместить некоторые аннотации слева от темы, используя HTML и CSS (например, аннотации 'status' и 'author', показанные в следующем макете / изображении):

example of desired layout

Я предпочитаю CSS вместо табличного макета.

Аннотации должны отображаться перед (слева) от заголовка, как показано выше.

В HTML аннотации должны располагаться после соответствующего заголовка, например, следующим образом (потому что информация / содержание, связанное с темой, обычно имеют то, что находится после заголовка темы): 

<h1>This is a section title</h1>
<div class="status">approved</div>
<div class="author">chris</div>
<p>This is some text. Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<h1>Different section title</h1>
<div class="status">rejected</div>
<p>Lorem ipsum.</p>

Есть (как минимум) две возможности:

Какой из них (или любой другой ответ) является лучшим способом реализации этого макета и почему?

Ответы [ 8 ]

8 голосов
/ 28 февраля 2011

Используйте раствор с поплавками. Абсолютное позиционирование здесь не должно использоваться, потому что текст позиционируется, а макет зависит от размера текста. Если ваш пользователь изменит свой браузер, чтобы увеличить размер текста, макет будет искажен. Вам следует особенно помнить об этом, если вы разрабатываете страницы для доступности (рассмотрите возможность использования% вместо px для размера), но в целом используйте абсолютное позиционирование только тогда, когда это единственный способ сделать то, что вы хотите.

Отличным ресурсом для понимания того, как правильно использовать поплавки, является эта разгромная статья в журнале . Я добавил это в закладки некоторое время назад и использую в качестве справки.

4 голосов
/ 27 февраля 2011

Нет необходимости в position:absolute. float:left лучше всего подойдет для этой ситуации. float:right тоже не нужно. Это решение совместимо с кросс-браузерами . Оно будет работать во всех браузерах, включая режим совместимости. Дайте мне знать, как это работает для вас или если вам нужны какие-либо изменения.

Проверьте рабочий пример на http://jsfiddle.net/PyHGy/9

Если для вас важен порядок HTML, когда аннотации должны идти после соответствующего заголовка, тогда нам нужно добавить position:absolute к .statusContainer, а затем настроить поле в .titleContainer. Это также кросс-браузерное совместимое решение.

Проверьте рабочий пример на http://jsfiddle.net/PyHGy/8/

3 голосов
/ 23 февраля 2011

Да, вы можете достичь того, что вы ищете с помощью CSS, то есть: плавает. Однако вам нужно будет указать ширину для элементов вашего блока.

Поиграй с этим. На самом простом уровне установите ширину 50% (может быть меньше в зависимости от заполнения) и добавьте float: left и float: right, где это применимо.

2 голосов
/ 23 февраля 2011

Не проверено, но это должно работать.Если это не так, я могу отредактировать, чтобы исправить.

HTML: 

<div class="section">
  <h1>This is a section title</h1>
  <div class="info">
     <div class="status">approved</div>
     <div class="author">chris</div>
  </div>
  <div class="body">
    <p>This is some text. Lorem ipsum.</p>
    <p>Lorem ipsum.</p>
  </div>
</div>

CSS: 

.section {
  overflow: auto; /* so that the height and width calculate floats properly, otherwise the height will be nothing since all elements are floating */
  width: 700px; /* or total width */
}

/* this could be simplified if you didn't want the <h1> right near the .info, by putting the <h1> inside .body and removing the .section h1 from this */
.section h1, .section .body {
  float: right; 
  width: 500px; /* whatever */
}

.section .info {
  float: left;
  width: 200px; /* whatever */
}
1 голос
/ 01 марта 2011

Как говорили другие, в этом случае вы должны использовать float.Я думаю, что если вы посмотрите на код позже, вам будет гораздо легче понять, если вы используете плавающие элементы.

Я предлагаю вам использовать жидкую разметку для этого, не устанавливая ширину сечения на постоянное значение px: http://jsfiddle.net/9j5jd/

Преимущества этого решения:

  • В секциях используется 100%-(width of status text) ширина контейнера
  • Порядок элементов html неизменен

Вы можете установить ширину состояния на % или em, я использовал 150px.Я не установил постоянную высоту для секций, вы можете сделать это, если хотите.

Коды (такие же, как jsfiddle): HTML: 

<div class="section">
    <div class="header"><h1>This is a section title</h1></div>
    <div class="status">approved</div>
    <div class="author">chris</div>
    <div class="content"><div class="inner">
        <p>This is some text. Lorem ipsum.This is some text. Lorem ipsum.This is some text. Lorem ipsum.This is some text. Lorem ipsum.This is some text. Lorem ipsum.This is some text. Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        </div></div>
</div>
<div class="section">
    <div class="header"><h1>Different section title</h1></div>
    <div class="status">rejected</div>
    <div class="content"><div class="inner">
        <p>Lorem ipsum.</p>
        </div></div>
</div>

CSS: 

/* Position */
.header, .content {
    float: right;
    width: 100%;
    margin-left: -150px;
}
h1, .inner {
    margin-left: 150px;
}
h1 {
    clear: both; 
}
.status, .author {
    float: left;
    width: 130px;  
    clear: left;
    text-align: right;
    padding-right: 20px;
}

/* Decoration */
h1 {
    color: #365F91;
    font-size: 1.2em;
    margin-bottom: 0.3em;
    font-weight: bold;
}
.status, .author {
    font-size: 0.8em; 
}
.status:before {
    content:"(status: ";
}
.author:before {
    content:"(author: ";    
}
.status:after, .author:after {
    content:")";
}
.section {
    float: left;
    margin-top: 0.5em; 
}
1 голос
/ 28 февраля 2011

Я считаю, что здесь нет целостного «правильного» ответа. В этом посте много хороших комментариев и примеров, а также плюсы и минусы между float и position.

Я предлагаю рабочий пример, основанный на наследовании CSS (и float). Это делает HTML-разметку очень аккуратной, доступной и очень удобной для чтения после запуска, когда наступает время редактирования / ревизии. HTML следует: 

<div class="author">
    <h3>This is a section title</h3>
    <span class="status">
        <p>(status: approved)</p>
        <p>(author: chris)</p>
    </span>
    <p>This is some text. Lorem ipsum. Lorem ipsum.</p>
</div>

Рабочий код здесь: http://jsfiddle.net/kz8dG/4/.

0 голосов
/ 24 февраля 2011

К сожалению, использование float для перемещения большей части контента вправо, как показано в других ответах, имеет нежелательный побочный эффект: он предотвращает обычный 'margin collapse ', который случается с элементы, которые находятся в нормальном потоке, но которых не происходит с плавающими элементами.

Альтернатива заключается в следующем.

Создайте большое поле, используя margin-left (не используйте left, потому что это приведет к тому, что блок станет слишком широким, переполнив край с правой стороны; тогда как увеличение поля приведет к соответствующему уменьшению до область контента). И укажите relative позиционирование (с нулевым левым / правым / верхним / нижним смещением), чтобы создать / запустить новый контекст стека, так что .section .info будет располагаться относительно каждого .section: 

.section
    {
        overflow: visible;
        position: relative;
        margin-left: 200px;
    }

Используйте позиционирование absolute для размещения .section .info слева и сверху от содержащего его блока: 

.section .info
    {
        position: absolute;
        top: 0px;
        left: -200px;
        width: 180px;
        height: 100%
        text-align: right;
        font-size: smaller;
    }

Абсолютное позиционирование .section .info выводит его из нормального потока, и поля между <h1> и <p>.

сокращаются.

Вот полный пример: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="./user.css" /> 
    <style type="text/css">
    .section
        {
            overflow: visible;
            position: relative;
            margin-left: 200px;
        }
    .section > *:first-child 
        {
            margin-top: 0
        }
    .section .info
        {
            position: absolute;
            top: 0px;
            left: -200px;
            width: 180px;
            height: 100%
            text-align: right;
            font-size: smaller;
        }
    </style>
</head>
<body>
<div class="section">
    <h1>1st section title</h1>
    <div class="info">
        <div class="status">approved</div>
        <div class="author">chris</div>
    </div>
    <p>This is some text. Lorem ipsum.</p>
    <p>Lorem ipsum.</p>
    <p>Lorem ipsum.</p>
    <p>Lorem ipsum.</p>
</div>
</body>
</html>
0 голосов
/ 23 февраля 2011

Вот решение, основанное на ответе Аарона .Это небольшое уточнение, которое:

  • использует дочерний селектор .section > *, чтобы все правильно перемещать (что устраняет необходимость явной ссылки на заголовочный элемент [s] .section h1, и.section .body div)

  • Удаляет <div class="body"> из HTML

  • Добавляет .section > *:first-child { margin-top: 0 }, чтобы заголовок и .info имеют одинаковое значение margin-top (любое такое поле должно применяться к .section, а не только к заголовку)

Вот код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .section
        {   overflow: auto; }
    .section > *
        {
            float: right;
            width: 80%; /* whatever */
        }
    .section > *:first-child 
        {
            margin-top: 0
        }
    .section .info
        {   float: left;   width: 20%; /* whatever */ }
    </style>
</head>
<body>
<div class="section">
    <h1>This is a section title</h1>
    <div class="info">
        <div class="status">approved</div>
        <div class="author">chris</div>
    </div>
    <p>This is some text. Lorem ipsum.</p>
    <p>Lorem ipsum.</p>
</div>
<div class="section">
    <h1>Next section title</h1>
    <div class="info">
        <div class="status">rejected</div>
    </div>
    <p>This is some text. Lorem ipsum.</p>
    <p>Lorem ipsum.</p>
</div>
</body>
</html>

Или используйте абсолютную ширину, как показано в ответе Аарона, вместо относительной ширины.

...