Twitter Загрузочный ломающий лоток содержимого div с несколькими элементами внутри

Я использую bootstrap для создания отзывчивого сайта.Twitter Загрузочный ломающий лоток содержимого div с несколькими элементами внутри

У меня есть два контейнера, у которых есть контент, который я не хочу разбивать на новые строки, если размер окна изменяется.

В настоящее время у меня есть этот fiddle, который демонстрирует.

Я думал, что использование clearfix в родительском контейнере для каждой новости будет работать. Но текст нарушается от изображения при изменении размера.

Вы можете увидеть это в this image

Любые подсказки?

Это основной CSS (хотя все это в скрипке):

/* News items */ 
.news-item { 
    padding:10px 0 10px 10px; 
} 

.news-item p { 
padding:0; 
margin:0; 
} 

.news-item img, 
.news-item-text { 
float:left; 
} 

.news-item-text { 
padding:0 0 0 5px; 
} 

.news-heading { 
font-size:18px; 
} 

.news-tags { 
font-family:ffs-italic; 
font-size:12px; 
}

Это вершина HTML:

<div class="row"><!-- breaking and buzzing --> 
      <div class="span4"><!-- breaking news --> 
       <h2>Breaking</h2> 
       <div id="breakingNews" class="rounded clearfix"> 
        <div class="news-item clearfix"> 
         <a href=""> 
          <img src="img/news/sm/sq01.jpg" width="54" height="54" /> 
         </a> 
         <div class="news-item-text"> 
          <p class="news-heading"><a href="">Omni Scents to launch...</a></p> 
          <p class="news-subheading">At vero eos fragrance line inspired</p> 
          <p class="news-tags"><a href="" class="pink">BEAUTY</a>, <a href="" class="pink">PRODUCTS</a></p> 
         </div> 
        </div> 
        <div class="news-item clearfix"> 
         <a href=""> 
          <img src="img/news/sm/sq02.jpg" width="54" height="54" /> 
         </a> 
         <div class="news-item-text"> 
          <p class="news-heading"><a href="">IFF finishes year strong...</a></p> 
          <p class="news-subheading">Lorem ipsum in dolor contratis</p> 
          <p class="news-tags"><a href="" class="orange">INDUSTRY</a></p> 
         </div> 
        </div>

источник

2013-03-16 lharby

Можете ли вы быть более ясными, что вы имеете в виду, нарушая, хотите ли вы, чтобы «Buzzing» приходило ниже «Breaking» & Breaking products появляются рядом с другим. – VenomVendor

Нет. Я имею в виду контент внутри каждого новостного материала. Я всегда хочу, чтобы это была 100% -ная ширина родительского контейнера. Таким образом, квадратное изображение и параграф рядом с ним всегда должны быть в блоке строк. Имеет ли это смысл. Посмотрите ссылку на изображение. – lharby

Вы в этих случаях вам нужно поплавок ваших разделов, а также указать ширину для div, например:

.news-item { 
    padding: 10px 0 10px 10px; 
    float: left; 
    width: 220px; 
}

Кроме того, необходимо определить ширину каждого <p> внутри дивы, как это:

.news-item-text { 
    padding: 0 0 0 5px; 
    width: 160px; 
}

Для отзывчивым макета, необходимо использовать тег @media установить ширину каждого снова, как:

@media (max-width: 767px) { 
    .news-item { 
     padding: 10px 0 10px 10px; 
     float: left; 
     width: 160px; 
    } 

    .news-item-text { 
     padding: 0 0 0 5px; 
     width: 100px; 
    } 
}

Надеюсь, это сработает!

источник

2013-03-16 11:11:49 silviomoreto

Да, это выглядит правильно, мне нравится ваш ответ, только то, что я надеялся решить его для всех различных max/min width без необходимости кодировать каждый. Спасибо. – lharby

.news-item a 
    { 
     display: block; 
     float: left 
    } 
.news-item-text 
    { 
    float: right; 
    width: 75%; /* adjust this to fit */ 
    }

источник

2013-03-16 10:35:31 VenomVendor

Пожалуйста, добавьте описание, почему это работает. – FakeRainBrigand

@lharby делает эту работу? Этот код входит в точку останова, где вы столкнулись с проблемой. – VenomVendor

Это какая-то работа, но она немного неуклюжая. – lharby

Twitter Загрузочный ломающий лоток содержимого div с несколькими элементами внутри

ответ

Смежные вопросы