Inline-div занимает слишком много места

Я использую основу для взлома интерфейса, и в основном я хочу, чтобы элемент div.context имел только ширину, доступную после div.side, но div.context дает текст внутри себя слишком много места, поэтому он уходит от строгий ряд:Inline-div занимает слишком много места

<div class="row"> 
    <div class="side left" data-equalizer-watch> 
     <span class="bump">&uarr;</span> 
     <img src="http://lenta-ua.net/uploads/posts/2014-03/1393873729_apple.png" /> 
    </div> 
    <div class="context left" data-equalizer-watch> 
     <h5><a>Lorem ipsum dolor sit amet sit amet dolor sit amet sit amet amet, LOL here we go some text yeeeah</a></h5> 
     <small class="clearfix">submitted 2 minutes ago by <a>tucnak</a></small> 
     <div class="info"> 
      <a href="">0 comments</a> 
      <a href="">share</a> 
     </div> 
    </div> 
</div>

Hehe Hehe

Да, стили!

.thread .side { 
    display: inline-block; 
    padding-right: 10px; 
    float: left; 
} 

.thread .context { 
    display: inline-block; 
    float: left; 
}

источник

2014-03-22 Illya Kovalevskyy

Можете ли вы опубликовать остальную часть кода CSS? – MrByte

@DemVoids rest css не имеет ничего общего с позиционированием, поэтому я, как 100% уверен, что это не поможет ya –

Вот краткий пример того, как можно сделать ti. Это подобный метод smashingmagazine.com использует для своих боковых панелей:

http://jsfiddle.net/C2hcT/

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

HTML

<div class="row"> 
    <div class="side left" data-equalizer-watch> <span class="bump">&uarr;</span> 

     <div class="img-wrapper"> 
      <img src="http://lenta-ua.net/uploads/posts/2014-03/1393873729_apple.png" /> 
     </div> 
    </div> 
    <div class="context left" data-equalizer-watch> 
     <h5><a>Lorem ipsum dolor sit amet sit amet dolor sit amet sit amet amet, LOL here we go some text yeeeah</a></h5> 
<small class="clearfix">submitted 2 minutes ago by <a>tucnak</a></small> 

     <div class="info"> <a href="">0 comments</a> 
<a href="">share</a> 

     </div> 
    </div> 
</div>

CSS

.row { 
    width:100%; 
    background:red; 
    padding-left:140px; 
    position:relative; 
} 
.thread .side { 
    display: inline-block; 
    padding-right: 10px; 
    float: left; 
} 
.side.left { 
    width:120px; 
    position:absolute; 
    top:0; 
    left:0; 
    background:green; 
} 
.img-wrapper { 
    width:100px; 
} 
.side.left img { 
    width:100%; 
} 
.side.left .bump, .side.left .img-wrapper { 
    display:inline-block; 
} 
.thread .context { 
    display: inline-block; 
    float: left; 
}

источник

2014-03-22 11:36:27 MarioD

Это решило мою проблему, но все равно не выглядит хорошим решением:/ –

Это совершенно жизнеспособное решение, единственное другим способом было бы установить ширину на обоих элементах (.side.left) & (.context.left) – MarioD

Я использовал свой HTML, но внесли некоторые изменения в CSS и сделал это fiddle

Проверьте, если это поможет.

Я удалил .thread имя класса с CSS, так как я не нашел, что в HTML

.side { 
    display: inline-block; 
    padding-right: 10px; 
    float: left; //Removed this line 
} 

.context { 
    display: inline-block; 
    float: left; //Removed this line 
}

И дал display:inline-flex; к DIV .row

источник

2014-03-22 11:47:44 James

Inline-div занимает слишком много места

ответ

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