выровнять два divs по длине первого

Question

Мне нужно выровнять второй div на основе длины первого. Первый div содержит некоторый контент, такой как заголовок статьи и данные пользователя. Второй div содержит рейтинг для этого названия. Я назначил свойство float для обоих div. Это отлично работает, если содержимое внутри первого div не слишком длинное. Но если заголовок слишком длинный, название накладывается на рейтинг.

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

<div id="result-1095" class="selectedResource"> 
    <div style="float:left;width:67%;"> 
     <p> 
      <a class="details" id="resource-1095" href="#id:resource1095"> 
       TestTitleTestTitleTestTitleTestTitleTestTitleTestTitleTestTitleTestTitletest tests tests test testst 
      </a> 
     </p> 
     <p class="articleDetails"></p> 
     <p class="userDetails">Added by username</p> 
    </div> 
    <div style="float:right;" class="yui3-widget component rating" id="ResourceRating-1095"> 
    <span class="rating-content"> 
     <span class="rating-label"></span> 
     <a onclick="return false;" title="one" class="icon-star-empty"></a> 
     <a onclick="return false;" title="two" class="icon-star-empty"></a> 
     <a onclick="return false;" title="three" class="icon-star-empty"></a> 
     <a onclick="return false;" title="four" class="icon-star-empty"></a> 
     <a onclick="return false;" title="five" class="icon-star-empty"></a> 
    </span></div> 
    <p style="clear:both"></p> 
</div> 

Я добавил фрагмент скрипки. Как-то рейтинг yui не отображается в скрипке (хотя я загрузил yui на фреймворках) http://jsfiddle.net/wkj926rq/

Answer 1

Вы можете использовать word-wrap: break-word для деталей класса

.details{ 
word-wrap: break-word 
} 

http://www.css3.com/css-word-wrap/

по другому пути изменения размечать - Вы можете использовать display:inline-block; для своих divs вместо float;

<div> 
<div class="first inlineblock"> 
</div> 
<div class="second inlineblock"> 
</div> 
<div> 

CSS

.inlineblock 
{ 
display:inline-block; 
vertical-align:top; 
} 

Answer 2

Возможно, вам стоит попробовать задать ширину для заголовка (class = "details").

Answer 3

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

Answer 4

Вы можете использовать flexboxes установки контейнера:

.wrapper , #result-1095{ 
    display: flex; 
    flex-flow: nowrap; 
} 

PS: если вы вставляете скрипку (фрагмент) это более проверяемым