Divs, плавать и выравнивать, нужна помощь

Question

У меня есть этот кошмарный код,

 <div style="height:46px;">
    <div style="text-align:left;float:left;">
      <img alt="Document Logo" src="Images/img1.gif"></img>
    </div>
    <div style="text-align:left;float:left;margin-top:5px;margin-left:13px;">
      <font size="4">
        <b>title (needs to be align to the left,next to img1)</b>
      </font>
    </div>
    <div style="text-align:right;float:right;vertical-align:top;">
      <img alt="Logo" src="Images/img.jpg"/>
    </div>
   </div>

img1 и title должны быть выровнены по левому краю, а img2 должны быть выровнены по правому краю, но при изменении размера окна img2 переходит под заголовок.

Мне нужно, чтобы они все остались в одной строке.

Кто-нибудь может помочь?

Заранее спасибо.

Answer 1

Другое решение - использовать абсолютное позиционирование вместо поплавков. Вот так:

<div style="position:relative; height:46px;">
    <div style="position:absolute; top:0; left:0; width:50px">
        <img alt="Document Logo" src="Images/img1.gif" width="50"></img>
    </div>
    <div style="position:absolute; top:5px; left:63px;">
        <font size="4">
        <b>title (needs to be align to the left,next to img1)</b>
        </font>
    </div>
    <div style="position:absolute; top:0; right:0;">
        <img alt="Logo" src="Images/img.jpg"/>
    </div>
</div>

Вещи, не относящиеся к вышеуказанному коду:

1. Убедитесь, что ширина первого div равна размеру изображения.
2. Второй div должен иметь "left" из: ширина первого div + 13 (ваш край слева)
3. Второй div имеет вершину 5 (ваш край-вершина)
4. Вы можете получить немного больше фантазии, указав "право" на втором div. Это помогло бы гарантировать, что заголовок и 3-й div / image никогда не перекрываются.
5. Я оставил встроенные стили для краткости, но, пожалуйста, сделайте их внешними (через классы или идентификаторы)
6. Полностью избавьтесь от тега FONT, если можете.

Answer 2

вы можете создать два контейнера div и плавать один влево и один вправо

Answer 3

Поместите text-align:left в самый внешний div, поменяйте местами второй и третий внутренний div, а затем избавьтесь от ненужного <div><font><b></b></font></div> монстра, заменив его семантически правильным и намного более коротким <h1></h1>:

<div style="height:46px;text-align:left">
    <div style="text-align:left;float:left;">
      <img alt="Document Logo" src="Images/img1.gif"></img>
    </div>
    <div style="text-align:right;float:right;vertical-align:top;">
        <img alt="Logo" src="Images/img.jpg"/>
    </div>
    <h1>title (will be aligned to the left, next to img1)</h1>
</div>

После этого вы можете по-прежнему применять поля и отступы к h1 по своему усмотрению.

Answer 4

Вам необходимо указать минимальную ширину самого внешнего контейнера, установив наименьший допустимый размер.

<div style="height:46px; min-width: 200px">
    <div style="text-align:left;float:left;">
      <img alt="Document Logo" src="Images/img1.gif"></img>
    </div>
    <div style="text-align:left;float:left;margin-top:5px;margin-left:13px;">
        <font size="4">
            <b>title (needs to be align to the left,next to img1)</b>
        </font>
    </div>
    <div style="text-align:right;float:right;vertical-align:top;">
      <img alt="Logo" src="Images/img.jpg"/>
    </div>

Answer 5

Попробуйте поместить атрибут CSS ширины или минимальной ширины сверху, содержащий div, например:

, где 300 заменяется объединенной шириной изображений.

Answer 6

Попробуйте добавить минимальную ширину к внешнему элементу div и переполнить: hidden