Три ряда разных размеров внутри плавающего элемента - PullRequest
Новая
       16

Три ряда разных размеров внутри плавающего элемента

1 голос
/ 23 февраля 2012

У меня есть два элемента div внутри одного элемента div. Эти два элемента div имеют ширину 50%, а другой перемещается влево, а другой перемещается вправо. Div с плавающей точкой справа содержит одну большую картинку (в разной высоте), а div с плавающей точкой слева содержит текст. В левом div эти тексты разделены на три строки разных размеров, и весь левый div должен быть таким же высоким, как правый div. Как я могу сделать это, используя только CSS? Вот мой пример кода: 

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
    margin: 0;
}
.container {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FF0;
}
.left {
    float: left;
    width: 50%;
    background: #F0F;
}
.left .first {
    height: 20%;
}
.left .second {
    height: 50%;
}
.left .third {
    height: 30%;
}
.right {
    float: right;
    width: 50%;
}
.right img {
    display: block;
    max-width: 100%;
}
p {
    margin: 0;
}
</style>
</head>
<body>          
    <div class="container">
        <div class="left">
            <div class="first">
                <p>First</p>
            </div>
            <div class="second">
                <p>Second</p>
            </div>
            <div class="third">
                <p>Third</p>
            </div>
        </div>
        <div class="right">
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
        </div>
    </div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 23 февраля 2012

Есть несколько вещей, которые вам нужно сделать:

Вам необходимо float контейнеров.

Вам необходимо добавить дополнительный контейнер и вложить div в следующем порядке:

<div class="container2">
  <div class="container">
    <div class="left">
      <div class="first">
        <p>First</p>
      </div>
      <div class="second">
        <p>Second</p>
      </div>
      <div class="third">
        <p>Third</p>
      </div>
    </div>
    <div class="right">
      <img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
    </div>
  </div>
</div>

Затем вам нужно relative расположить ваши контейнеры и переместить их вправо.После этого вы переместите свои элементы содержимого слева.

Для вашего CSS: 

.container {
  width: 100%;
  float: left;
  position: relative;
  right: 50%;
}
.container2 {
  width: 100%;
  float: left;
  overflow:hidden;
  position:relative;
}
.left {
  float: left;
  width: 50%;
  left: 50%;
  position: relative;
  background: #F0F;
}
.right {
  float: left;
  width: 50%;
  left: 50%;
  position: relative;
}

Пожалуйста, см. эту страницу , если у вас возникли трудности.

0 голосов
/ 23 февраля 2012

Короткий ответ: вы можете вроде сделать это, но я не думаю, что он будет вести себя так, как вы ожидаете.

Вы должны были бы объявить явные высоты для двух <div> - 

.left, .right {
   height: 100px /*or whatever height you want*/;     
}

Если это статическая страница, и изображение никогда не изменяется, вы можете ввести пиксель вручнуюколичество.

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

Есть способы его подделать (см. метод искусственных столбцов ), но вы не можете программно получить один div, чтобы изменить его высоту, чтобы соответствовать другому.

Есть способы сделать это с помощью JavaScript, но я не буду вдаваться в них, потому что вы спросили о CSS (и я ненавижу использовать JS для манипулирования таким макетом - это очень ненадежно).

Также: если ваш содержащий div, .container, рушится, это потому, что вам нужно либо плавать, либо применять метод clearfix .

...