Как сделать HTML-списки обтеканием плавающего контента - PullRequest
Новая
       35

Как сделать HTML-списки обтеканием плавающего контента

0 голосов
/ 03 ноября 2018

Допустим, у меня есть плавающая слева фигура HTML с обтеканием текстом: 

<figure style="float:left">…</figure>
<p>stuff</p>
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
<dl>
  <dt>foo</dt>
  <dd>bar</dd>
</dl>

Это просто; фигура сместится влево, а список абзацев обернется вокруг фигуры справа.

Маркированный список будет выглядеть странно; маркеры не будут соответствовать содержанию абзаца над ним. А для списка определений <dl> оба элемента <dt> и <dd> располагаются по левому краю, даже если моя таблица стилей дает <dd> левое поле, например

Причина в том, что при плавающем элементе контейнеры не обертываются вокруг него, а только содержимое контейнера . Так что <ul> - это не упаковка, а только содержимое внутри. Таким образом, поля <p> и <ul> фактически расширяются влево, с по плавающая фигура, и только содержимое переносится вправо. Таким образом, левое поле <dl> относится к левому краю страницы, и поскольку пространство для плавающей запятой намного больше, чем запрошенное левое поле, после переноса содержимого дополнительное поле не добавляется.

Теперь, кажется, я могу добавить простое исправление, которое волшебным образом улучшит этот вид на моих страницах с примерами: 

ul, ol, dl {
  overflow: auto;
}

По сути, это предотвращает слияние полей и, по сути, сами контейнеры оборачивает фигуру. Другими словами, он предотвращает слияние поплавка с их полями. И это выглядит так, как я ожидал!

Но ... это кажется легким и немного неправильным. Почему бы мне не применить это, например, к <p>? Какие проблемы это вызовет в будущем? Если я добавлю где-нибудь какой-нибудь цвет фона, это вызовет проблемы, если <p> имеет поле, которое простирается через число с плавающей точкой, а списки - нет?

Подводя итог, каков наилучший способ заставить списки выглядеть правильно, когда они обертываются вокруг поплавка, и будет ли использование overflow: auto вызывать какие-либо непредвиденные последствия?

1 Ответ

0 голосов
/ 04 ноября 2018 

ul, ol, dl,dd {
/*   overflow: auto; */
  padding:0;
  margin:0;
}
ul li{
    /*set position for li style*/
    /*list-style-position: inside;*/
    /*list-style-position: outside; */
    /* or for remove li style */
    list-style: none;

}
.clearfix:after{
  clear:both;
  content:"";
  display:block;
}
.float-right{
  float:right;
}
.float-left{
  float:left;
}
.wrapper{
  background:red;
  width:300px;
}
.wrapper-detail{
  background:blue;
  width:calc(100% - 100px);/* .wrapper's width - figure's with */
}
figure{
  width:100px;
  margin:0;
  background:green;
}
<div class="wrapper clearfix">
  <figure class="float-left">…</figure>
  <div class="wrapper-detail float-right">
    <p>stuff</p>
    <ul>
      <li>foo</li>
      <li>bar</li>
    </ul>
    <dl>
      <dt>foo</dt>
      <dd>bar</dd>
    </dl>  
  </div>
</div>
...