Question

我需要根据第一个div的长度对齐第二个div。第一个div包含一些内容，如文章标题和用户详细信息。第二个div包含该标题的评级。我已为两个div分配了float属性。如果第一个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;用于div而不是float;

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

<强> CSS

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

Answer 2

请在标记ex：.same-width和set width属性

上添加相同的类

Answer 3

您可以使用flexboxes设置容器：

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

PS：如果你粘贴一个小提琴（片段）它是更可测试的

Answer 4

也许你应该尝试给标题赋予宽度（class =“details”）。

根据第一个div的长度对齐两个div

4 个答案: