Проблемы выравнивания элементов
0
У меня проблема с выравниванием элементов.
У меня есть элементы, которые появляются внутри других, например, мой абзац с красным фоном выше моего изображения, а моя вторая статья выше моей первой статьи.
Я уже пробовал много тестов с поплавками, но он не работает.
Вы видите, где проблема?
Вот пример, показывающий мою проблему: http://jsfiddle.net/2tsmX/3/
Мой html:
<div id="body_news">
<div id="body-news1">
<h1>News</h1>
<article id="news">
<div class="img_container">
<img src="../image.jpg"/>
</div>
<h2><a href="#" >Títule Of the News</a></h2>
<span>Date of the news</span>
<p>text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
</p>
</article>
<article id="news">
<div class="img_container">
<img src="../image.jpg"/>
</div>
<h2><a href="#" >Títule Of the News</a></h2>
<span>Date of the news</span>
<p>text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
</p>
</article>
</div>
</div>
Мой css:
#body_news1
{
float:left;
width:480px;
}
#body_news1 h1
{
font-size:25px;
font-weight:100;
margin-bottom:10px;
}
.img_container
{
width: 160px;
height: 165px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
margin-right:20px;
border:3px solid #f3f3f3;
margin-top:4px;
}
#body_news
{
width:480px;
height:auto;
margin:0 auto 0 auto;
}
#news
{
margin-bottom:5px;
position:relative;
background:yellow;
width:480px;
text-align:left;
}
#news h2 a
{
font-size:20px;
color:#000;
text-decoration:none;
margin-left:0;
}
#news span
{
font-size:14px;
}
#news p
{
margin-top:5px;
margin-bottom:5px;
background:red;
}
2 ответа
1
Лучший ответ
Вы пытаетесь сделать что-то подобное?
HTML
<div id="body_news">
<div id="body-news1">
<h1>News</h1>
<article class="news">
<div class="img_container">
<img src="../image.jpg"/>
</div>
<h2><a href="#" >Title Of the News</a></h2>
<span>Date of the news</span>
<p>
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
</p>
</article>
<article class="news">
<div class="img_container">
<img src="../image.jpg"/>
</div>
<h2><a href="#" >Title Of the News</a></h2>
<span>Date of the news</span>
<p>
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
</p>
</article>
</div>
</div>
CSS
#body_news1
{
width:480px;
}
#body_news1 h1
{
font-size:25px;
font-weight:100;
margin-bottom:10px;
}
.img_container
{
width: 160px;
height: 165px;
float: left;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
margin-right:20px;
border:3px solid #f3f3f3;
margin-top:4px;
}
#body_news
{
width:480px;
margin:0 auto 0 auto;
}
.news
{
margin-bottom:5px;
background:yellow;
min-height:185px;
}
.news h2 a
{
font-size:20px;
color:#000;
text-decoration:none;
margin-left:0;
}
.news span
{
font-size:14px;
}
.news p
{
margin-top:5px;
margin-bottom:5px;
background:red;
}
Biotox
Поделиться
-
0Спасибо, это было действительно, что я пытаюсь сделать! Но почему вам нужно иметь доступ к новостям?
-
0@OzzC
min-heightпредотвращает.newsразмера.img_containerпо.img_containerс.img_containerи позволяет изображению появляться за пределами границ.news.
Показать ещё 2 комментария
1
Простое исправление - добавьте <div style="clear:both;"></div> после <span>Date of the news</span> каждого div
Пример:
<div id="body_news">
<div id="body-news1">
<h1>News</h1>
<article id="news">
<div class="img_container">
<img src="../image.jpg"/>
</div>
<h2><a href="#" >Títule Of the News</a></h2>
<span>Date of the news</span>
<div style="clear:both;"></div> <!--HERE-->
<p>
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
</p>
</article>
<article id="news">
<div class="img_container">
<img src="../image.jpg"/>
</div>
<h2><a href="#" >Títule Of the News</a></h2>
<span>Date of the news</span>
<div style="clear:both;"></div> <!--HERE-->
<p>
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
</p>
</article>
</div>
</div>
Matthcw
Поделиться
-
0Спасибо, это было то, что я пытался, но с пунктом ниже даты! Спасибо!
Ещё вопросы
- 1Как установить ориентацию видов под наложением жестов на «нет»
- 1данные с функцией return против возврата простого объекта данных
- 0ng Cordova file_uri к base64
- 0Как вычесть месяцы из даты и справиться с переполнением?
- 1Генерация URL с параметрами из переменных JS в TWIG
- 0Отправить Push-уведомление на все токены в базе данных MySql
- 1Task.Delay сливается с Task.Yield?
- 0Набор символов Liquibase MySQL для изменения таблицы
- 0динамическое создание таблиц и столбцов с использованием MySQL Python Connector
- 1Все еще не понимают, каковы цели в Maven
- 0Сортировка списка двойных ссылок по убыванию
- 0угловой фильтр для свойства объекта в ngRepeat не работает с «track by»
- 1Recycler view не отвечает на клики
- 0Laravel PHP: обновленный файл интерфейса репозитория не распознается
- 1ASP SQL Update страницы просмотров при щелчках ссылок
- 1Как создать объект JSON с ключом и значением, где значение является массивом
- 0динамическое добавление строки в таблицу не работает с помощью jquery
- 0Array push - изменить имя на ключ
- 1Векторизация панд с функцией на частях колонны
- 0Как исключить строки со значениями '0', но не строки со значениями NULL в SQL?
- 0Скрипт запуска Drupal jQuery для .resize ()
- 0Угловой элемент директивы динамический Шаблон с его обновленным значением модели из контроллера?
- 1Как программно добавить List Widgets в TabBar?
- 1Тип программы уже присутствует: com.android.common.constant.HttpConstants
- 1Отправить строку в веб-сокет Python, используя JavaScript
- 1IQueryable в репозитории
- 1Отметить событие как явно НЕ пассивное
- 0Как связать JavaScript при наведении на элемент, чтобы изменить изображение элемента и отобразить блок третьего элемента
- 0Переадресация вкладок плагинов с первой вкладки на вторую
- 0Установите флажок в качестве переключателя и добавьте удалить значения на флажок Снимите флажок
- 1Java разбирает строковую дату на MilliSecond
- 1Добавить фильтр в столбец колба + sqlalchemy отношения
- 0$ save экземпляра $ save () стирает свойства
- 1как сохранить, а затем извлечь некоторую информацию из имен файлов в dataframe
- 1Kivy Scatter z-index
- 1Разве этот код не должен сделать всю картинку черной?
- 0Нужно ли удалять этот объект? (если я не собираюсь когда-либо удаляться)
- 1Рисование TextBox
- 0вектор emplace_back и shared_ptr в VS2012
- 0Как установить максимальный выбранный месяц в mtz.monthpicker?
- 0Содержимое PHP Post Request содержит необработанные данные
- 0Проверка существования ребра на неориентированном графе с использованием библиотеки графов лимонов
- 1Добавление нескольких списков в PivotItem в Windows Phone 7
- 1Как отправить объекты разных классов в одном сообщении Json, чтобы их можно было десериализовать с помощью Gson?
- 1Android - уведомление переднего плана отменяется при удалении приложения из последних приложений
- 1Украшение именованных компонентов в виндзоре
- 0Преобразование координат SVG в координаты карты изображения HTML
- 1добавить новую строку другого цвета в конце таблицы
- 1Добавить DataFrame внутри функции
- 1ffmpeg не работает с именем файла, есть пробел
id="news"наclass="news"так как и ID должен быть уникальным