4 div расположить рядом друг с другом

[alexd73]

Здравствуйте!

Есть такой код: Его содержимое генерируется скриптом, и поменять его вроде как нельзя. Однако можно менять очередность <div class=view-field*>

<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
  <div class="views-field-created-1"><span class="field-content">07</span></div>
  <div class="views-field-created"><span class="field-content">05/10</span></div>
  <div class="views-field-title"><span class="field-content"><a href="/%7Ealexd/drupal/?q=node/2" class="active">Недавно был запущен новый проект</a></span></div>
  <div class="views-field-teaser"><div class="field-content"><p>Это новость про Недавно был запущен новый проект</p></div></div>
</div>

Задача!

1) views-field-created-1 и views-field-created вывести один под другим слева в колонку шириной 81px

2) views-field-title и views-field-teaser вывести один под другим на оставшуюся ширину.

Буду признателен за помощь.

[s0rr0w]

Какую помощь от нас ждете? Что вы уже сделали, покажите. Как решали эту задачу?

[alexd73]

Какую помощь от нас ждете? Что вы уже сделали, покажите. Как решали эту задачу?

Я в основном игрался с параметром float: и clear:

Головоломка не сложилась.

мне бы хотелось получить помощь от тех, кто подобное уже делал. Или утверждение, что такое сделать нельзя. Я не особенно

[alexd73]

почти получилось вот таким способом:

<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
  <div class="views-field-created-1">
                <span class="field-content">07</span>
  </div>
  <div class="views-field-title">
                <span class="field-content"><a href="/%7Ealexd/drupal/?q=node/2">Недавно был запущен новый проект</a></span>
  </div>
  <div class="views-field-teaser">
                <div class="field-content"><p>Это новость про Недавно был запущен новый проект</p></div>
  </div>
  <div class="views-field-created">
                <span class="field-content">05/10</span>
  </div>
  </div>

.views-field-created-1 {
    background: url('images/cal.png') no-repeat;
    width: 81px; height: 82px;
    color: #373737;
    font-size: 30px;
    text-align: center;
    background: gray;
    float: left;

}

.views-field-created {
    color: #444444;
    width: 81px; 
    font-size: 16px;
    text-align: center;
    background: green;
    margin: 0;
}

.views-field-title {
    font-style: italic;
    font-weight: bold;
    width: 169px;
    font-size: 16px;
    color: #4b361c;
    background: yellow;
    float: left;
}

.views-field-teaser {
    position: relative;
    width: 169px;
    color: #4b361c;
    font-size: 16px;
    background: fuchsia;
    float: left;

}

в результате:

но мне надо, чтобы текст в зеленом поле был сразу под серым. Всю. голову уже сломал

[sigma77]

Попробуй так

  <div>
	<div style="float: left; width: 81px; background: grey;">
	  <p>Lorem ipsum dolor sit amet consectetuer id mollis quis Quisque pede. Justo.</p>
	</div>
	<div style="float: left; clear: left; width: 81px; background: green;">
	  <p>Lorem ipsum dolor sit amet consectetuer Nullam.</p>
	</div>
	<div style="overflow: hidden; background: yellow;">
	  <p>Lorem ipsum dolor sit amet consectetuer sed Donec a sed urna. Feugiat Fusce et morbi et vel.</p>
	  <p>Sed magna tincidunt vitae condimentum congue Aenean tortor Aliquam Duis vel. Dis justo dui interdum Nam orci pulvinar sit consequat wisi Phasellus. At.</p>
	</div>
	<div style="overflow: hidden; background: fuchsia">
	  <p>Lorem ipsum dolor sit amet consectetuer nibh eros et odio laoreet. Egestas risus Quisque Nulla ut pretium Fusce laoreet Cum non consectetuer. Est interdum id In tellus fermentum lacus quis Quisque nunc feugiat. </p>
	  <p>Lorem ipsum dolor sit amet consectetuer metus id sociis accumsan vel. Ante ante Mauris sem metus amet elit libero tempor Sed.</p>
	  <p>Sagittis et magna condimentum ligula velit laoreet dui pretium tempus enim. Sed et felis libero Quisque nulla ante sed wisi pretium ut. Quisque ut.</p>
	</div>
</div>

[alexd73]

Попробуй так

  <div>
	<div style="float: left; width: 81px; background: grey;">
	  <p>Lorem ipsum dolor sit amet consectetuer id mollis quis Quisque pede. Justo.</p>
	</div>
	<div style="float: left; clear: left; width: 81px; background: green;">
	  <p>Lorem ipsum dolor sit amet consectetuer Nullam.</p>
	</div>
	<div style="overflow: hidden; background: yellow;">
	  <p>Lorem ipsum dolor sit amet consectetuer sed Donec a sed urna. Feugiat Fusce et morbi et vel.</p>
	  <p>Sed magna tincidunt vitae condimentum congue Aenean tortor Aliquam Duis vel. Dis justo dui interdum Nam orci pulvinar sit consequat wisi Phasellus. At.</p>
	</div>
	<div style="overflow: hidden; background: fuchsia">
	  <p>Lorem ipsum dolor sit amet consectetuer nibh eros et odio laoreet. Egestas risus Quisque Nulla ut pretium Fusce laoreet Cum non consectetuer. Est interdum id In tellus fermentum lacus quis Quisque nunc feugiat. </p>
	  <p>Lorem ipsum dolor sit amet consectetuer metus id sociis accumsan vel. Ante ante Mauris sem metus amet elit libero tempor Sed.</p>
	  <p>Sagittis et magna condimentum ligula velit laoreet dui pretium tempus enim. Sed et felis libero Quisque nulla ante sed wisi pretium ut. Quisque ut.</p>
	</div>
</div>

Все заработало!

Большое спасибо! кто бы мог подумать, что overflow поможет

[psywalker]

Все заработало!

Большое спасибо! кто бы мог подумать, что overflow поможет

Вот ты щас ошибся смачно, тебе не overflow помогло, а sigma77