Выравнивание изображений по левому краю ul block

Question

Выравнивание изображения (400x100) по левому краю ul блок: некоторые элементы находятся на правой стороне изображения, некоторые элементы находятся под изображением. Как сделать ul блок остаться вместе? т.е. все элементы находятся на правой стороне изображения. Также изображение перекрывается с ul блок.

<img src="url" align="left">

<div>
  <ul>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>
</div>

Answer 1

Просто добавьте display: inline-block; на ваш <ul>, Это устанавливает <ul> отображаться в той же строке, что и изображение, сохраняя его вместе следующим образом:

img {
  width: 400px;
  height: 100px;
}
ul {
  display: inline-block;
}

<img src="url" align="left">

<div>
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>

Answer 2

В вашем конкретном случае:

ul {
  clear: left;
}

(если вы хотите ul под изображением)

http://codepen.io/anon/pen/xRENMB

(Но вы должны использовать класс для ul и правила, чтобы другие ulне пострадает)

Answer 3

Первое, что вы должны сделать, это удалить align="left" атрибут из вашего img элемент, так как все элементы выровнены по умолчанию по левому краю, а атрибут align обычно зарезервирован только для table элемент по умолчанию. img а также div элементы имеют display: block; атрибут по умолчанию. Есть два достойных решения вашей проблемы.

1. Поплавайте два элемента и не забудьте очистить свои поплавки. Вы также должны иметь привычку правильно делать отступы, чтобы вы могли видеть отношения родитель-потомок в вашей HTML-структуре.

HTML

    <div class="container">
      <img src="#">
      <div>
        <ul>
          <li>Hello</li>
          <li>Hello</li>
          <li>Hello</li>
          <li>Hello</li>
          <li>Hello</li>
          <li>Hello</li>
          <li>Hello</li>
        </ul>
      </div>
    </div>

CSS

    img,
    div {
        float: left;
    }

    .container {
        overflow: hidden;
    }

2. Установите оба элемента как элементы встроенного блока.

CSS

    img,
    div { 
        display: inline-block;
    }