Как выровнять эти DIVs бок о бок (скрипка внутри)?

0

Мне удалось выровнять бок о бок DIV, содержащий изображение, и DIV, содержащий текст, рядом с ним, применяя float:left к изображению DIV.

Но когда я включаю эти два DIV в родительский DIV и дублирую родительский элемент и пытаюсь выровнять родителей бок о бок, применяя float:left to the first parent, он не работает.

Вот мой код:

<div style="width:350px;min-height: 200px; float:left;">
  <div style="float:left;"><img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"></div>
  <div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
  <div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>

<div style="width:350px;min-height: 200px;">
  <div style="float:left;"><img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"></div>
  <div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
  <div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>

и скрипка.

Я также задаюсь вопросом, является ли остальная часть кода лучшей практикой, такой как padding-left:135px - было бы лучше использовать относительное дополнение из изображения, а не родительский div? если да, то какой самый простой способ изменить это?

  • 0
    Ваш float:left; Правило находится за пределами значения вашего атрибута style , то есть оно не будет плавать этот div вообще. Вы должны применить float к обоим div .
  • 1
    Возможно, вам больше повезет с display: inline-block, чем с float - я обычно рассматриваю float как макет последней инстанции, он вызывает больше проблем, чем решает. Подсказка: при использовании display: inline-block вам, как правило, также необходимо выровнять по вертикали
Показать ещё 4 комментария
Теги:
alignment

3 ответа

3
Лучший ответ

У вас есть float:left от атрибута style, попробуйте переместить это внутри речевых меток и применить float: left к обоим родительским div.

Поделиться
  • 0
    Спасибо! это похоже на работу (мой поплавок изначально был внутри, это была просто опечатка в моем посте), почему мне нужно применить его к обоим родителям, в то время как с изображением этого было достаточно, чтобы применить только к изображению?
  • 0
    У div'ов есть display: block, что означает, что они захотят сами сидеть в теоретическом ряду. Плавающий преодолевает это.
Показать ещё 1 комментарий
1

Обновленный скрипт

Вы можете просто изменить свой код ниже, указав каждый div на display:inline-block; то до тех пор, пока ваше окно браузера больше суммы двух div, они будут отображаться в строке, нет необходимости в поплавках:

<div style="width:350px;min-height: 200px;display:inline-block;">
    <div style="float:left;">
        <img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;">
    </div>
    <div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
        <div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;"/>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
<div style="width:350px;min-height: 200px;display:inline-block;">
    <div style="float:left;">
        <img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"/>
    </div>
    <div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
    <div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>

Тем не менее я настоятельно рекомендую вам отделить свой CSS от своего HTML, чтобы четко различать контент и презентацию и получать четкие преимущества, которые предлагает.

Поделиться
  • 1
    Стоит отметить, что display: inline-block будет отображать любые пробелы между элементами inline-block , что приведет к потенциально нежелательным промежуткам между ними.
  • 0
    спасибо, а какая практика лучше? (Я бы в конечном итоге отделить их, это для тестирования изменений)
1

У вас был один из ваших float: left атрибуты вне тега стиля. Кроме того, вы должны использовать классы CSS вместо того, чтобы ставить все ваши стили CSS в ряд. Это делает ваш код намного опрятным и предотвращает много дублирования стиля. Вот обновленный Fiddle.

HTML

<div class="parent">
    <div class="image-wrap">
        <img class="image" src="image.jpg" width=120px height=120px />
    </div>
    <div class="title">
        Title
    </div>
    <div class="text">
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
    </div>
</div>

<div class="parent">
    <div class="image-wrap">
        <img class="image" src="image.jpg" width=120px height=120px />
    </div>
    <div class="title">
        Title
    </div>
    <div class="text">
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
    </div>
</div>

CSS

.parent {
    width:350px;
    min-height: 200px;
    float:left;
}
.title {
    font-size:15pt;
    color:red;
    letter-spacing:-.04em;
    padding-top:2px;
    padding-left:135px;
}
.text {
    font-size:11pt;
    color:black;
    letter-spacing:-.02em;
    margin-top:4px;
    padding-left:135px;
}
.image-wrap {
    float: left;
}
.image {
    border: 1px solid black;
    padding:1px;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню