CSS - Div не останется на правой стороне другого Div - PullRequest
Новая
       3

CSS - Div не останется на правой стороне другого Div

5 голосов
/ 05 мая 2011

Довольно простая настройка здесь, я просто пытаюсь заставить двух дивов сидеть рядом.Изображение слева, текст справа.По какой-то причине, если текст слишком длинный, он толкает div вниз.Я хотел бы просто сделать так, чтобы cs-summary div понимал, что он должен переносить текст, чтобы НЕ спрыгивать, как это:

http://jsfiddle.net/csaltyj/5Huau/

Код: 

<div class="container">
    <div class="cs-image">
        <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
    </div>
    <div class="cs-summary">
        <p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p>
    </div>
</div>
<div class="container">
    <div class="cs-image">
        <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
    </div>
    <div class="cs-summary">
        <p>Super short text behaves.</p>
    </div>
</div>

CSS: 

.container {
    overflow: hidden;
    border: 2px solid #0f0;
    width: 400px;
    margin-bottom: 1em;
}

.cs-image {
    float: left;
    border: 2px solid red;
}

.cs-summary {
    font-size: 0.8em;
    border: 2px solid blue;
    float: left;
    margin-left: 1em;
}

Как видно из второго контейнера ниже, короткий текст работает просто отлично.Я не хочу жестко кодировать значения в пикселях или em для определения ширины текста, я просто хочу, чтобы он соответствовал и «знал» свои границы.

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

Ответы [ 6 ]

8 голосов
/ 05 мая 2011

Если ваш div.cs-summary не имеет набора width, он займет столько места, сколько может

http://jsfiddle.net/hunter/5Huau/7/

.cs-summary {
    width: 180px;
    ...
}

или васможет удалить внутренние элементы div и просто сделать это:

http://jsfiddle.net/hunter/5Huau/11/

HTML 

<div class="container">
    <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />   
    <p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p>        
</div>
<div class="container">
    <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
    <p>Super short text behaves.</p>
</div>

CSS 

.container {
    overflow: hidden;
    border: 2px solid #0f0;
    width: 400px;
    margin-bottom: 1em;
}

.container img {
    float: left;
    border: 2px solid red;
}

.container p {
    font-size: 0.8em;
    border: 2px solid blue;
    margin-left: 1em;
}
0 голосов
/ 05 мая 2011

вот ваш код 

<!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" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title></title>
    <style type="text/css">
    .container {
    overflow: hidden;
    border: 2px solid #0f0;
    width: 10px;
    margin-bottom: 1em;
    width: 400px;
}

.cs-image {
    float: left;
    border: 2px solid red;
}

.cs-summary {
    font-size: 0.8em;
    border: 2px solid blue;
    margin-left: 1em;
}
    </style>
</head>
<body>

    <div class="container">
    <div class="cs-image">
        <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
    </div>
    <div class="cs-summary">
        <p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p>
    </div>
</div>
<div class="container">
    <div class="cs-image">
        <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
    </div>
    <div class="cs-summary">
        <p>Super short text behaves.</p>
    </div>
</div>
</body>
</html>

Просто удалите float прямо из cs-summary.

0 голосов
/ 05 мая 2011

как указал охотник и пользователь 671670, вы должны использовать ширину. Оба элемента должны помещаться в контейнер для отображения рядом друг с другом. Вы можете изменить свой HTML-код, поместить изображение в текст и поместить его влево, например: 

 <p>Texty text text McTexterson likes to text.
    Why is div getting shoved down?<img style="float:left" ... /></p>
0 голосов
/ 05 мая 2011

При перемещении влево или вправо (как показывает ваш пример) теги DIV будут автоматически расширяться до содержимого внутри них.Вы можете сделать две вещи, чтобы решить вашу проблему:

  1. Определите ширину в div, который содержит ваш текст
  2. Вместо того, чтобы переносить текст в тег div и тег абзаца (<div><p>text here</p></div>), удалите DIV вокруг тега абзаца и добавьте float:left к тегу абзаца.Например: <p style="float:left;">text here</p>"
0 голосов
/ 05 мая 2011

Считали ли вы, что вообще не использует float , или вам нужно поддерживать версии IE до 8? 

.container {
    border: 2px solid #0f0;
    width: 400px;
    padding-bottom: 1em;
}

.container > div {
    display: table-cell;
    vertical-align: bottom;
}
.cs-image {
    border: 2px solid red;
}

.cs-summary {
    font-size: 0.8em;
    border: 2px solid blue;
    padding-left: 1em;
}
0 голосов
/ 05 мая 2011

Удалите float:left из .cs-summary ...

И, возможно, используйте margin-right: 5px или что-то на .cs-image, чтобы получить пробел между ними.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...