Я работаю над новостной лентой, и я столкнулся с следующим: Я хочу очистить все предметы под аватаром, поэтому нет обернутого текста или чего-либо ниже.Очистить все элементы под определенным div

Это изображение показывает вопрос:

Я хочу, чтобы это было так (сделал это с Photoshop):

Код:

.news .news-item .avatar { 
    background-image: url("https://dl.dropboxusercontent.com/u/35853519/zakzek.png"); 
    width: 55px; 
    height: 55px; 
    background-size: cover; 
    float: right; 
    margin-left: 15px; 
    display: block; 
}

JSFiddle (см полный экран для лучшего обзора): http://jsfiddle.net/shadeed9/6npjgt7y/8/

Спасибо,

источник

2014-09-07 shadeed9

картинки не работают для меня! –

@PhilipG Попробуйте следующее: https://dl.dropboxusercontent.com/u/35853519/before.jpg и https://dl.dropboxusercontent.com/u/35853519/after.jpg – shadeed9

Если речь идет о работе с поплавком, затем overflow:hidden; Правило в порядке.

В нем показан элемент, в котором элементы с плавающей точкой стоят так много внутри, как в стороне, и раньше в потоке документа.

http://jsfiddle.net/6npjgt7y/14/

.meta { 
    overflow:hidden; 
}

Это о макете :) Так же вызвать его, а также: display:table/inline-block/flex и так делает float.

источник

2014-09-07 19:40:20

Большое вам спасибо! – shadeed9

DEMO

Добавить маржинальные

.meta{ 
margin-right: 70px; 
}

DEMO

или добавить обивка

.meta{ 
padding-right: 70px; 
}

или использование преобразования

источник

2014-09-07 19:17:46

Не изменяя структуру HTML, один из способов достижения этого - добавить маркер в мета-контент div с CSS. Вроде так:

div.meta { margin-right: 75px; }

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

источник

2014-09-07 19:18:10

Спасибо! можем ли мы сделать то же самое, используя изменение свойства отображения для аватара? Я попытался использовать встроенный блок, но он не работает. – shadeed9

Ну свойство margin будет компенсировать текст с края страницы тем же количеством пикселей, которое вы хотите. Свойство inline-block устраняет обертку, но перемещает текст под аватаром. Итак, какое свойство вы используете, зависит от того, как вы хотите отображать контент. –

Давая аватар и элемент h2, свойство display: inline-block выполнит трюк, также установите width для элемента h2.

http://jsfiddle.net/6npjgt7y/9/

источник

2014-09-07 19:24:51 LvdM

Спасибо! как насчет изображения и текста под ним? как мы можем достичь того же результата – shadeed9

В этом случае я разделил бы его в столбцах, например: просто обертка вокруг аватара и установила его для отображения: inline-block; и определенную высоту, [скрипка] (http://jsfiddle.net/6npjgt7y/13/) – LvdM

Вы можете использовать таблицу, поместить аватар в одну колонку и другие ваши содержание во второй колонке, например:

<div class="news" dir="rtl"> 
    <div class="news-item"> 
     <table> 
      <tr> 
       <td style="vertical-align: top;"> 
        <div class="avatar"></div> 
       </td> 
       <td> 
        <div class="meta"> 
         <h1>اطلاق تطبيق مسنجر بلاك بيري رسميًا إلى أندرويد وiOS7</h1> 
         <h2>لندن - "القدس" - كشف مصدر من شركة اتصالات اميركية أن الطلب المسبق على هاتف "أبل" الجديد "آيفون 5 سي" ليس "هائلاً" كما أن حجم المعروض منه ومن النسخة الأعلى سعراً جاء مخيباً للآمال. كشفت "أبل" الأسبوع الماضي النقاب عن أحدث طرازين...</h2> 
         <img src="https://dl.dropboxusercontent.com/u/35853519/apple.jpg" alt="Apple news" /> 
         <div class="zakzeks-share"> 
          <div class="number"><i class="flaticon-social19"></i>عدد الزقزقات 17</div> 

         </div> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> <!-- End of news -->

источник

2014-09-07 19:36:50 Nabi

Очистить все элементы под определенным div

ответ

DEMO

DEMO

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