Question

在我的HTML中，我试图在标题的子弹旁边对齐标题，这样标题的第一行总是在子弹旁边，第二行（如果有的话）不会改变标题的位置 - 它只是走到下一行。

JSFiddle：

HML：

<div class="bullet-container">
    <div class="bullet-title-container">
        <div class="circle-container">
            <div class="circle"></div>
        </div>
        <p class="bullet-title">Short Title</p>
    </div>
    <div class="bullet-details-container">
        <p>Body Text</p>
    </div>
</div>

CSS：

.circle-container {
    height: 34px;
    display: inline-block;
    position: relative;
    width: 14px;
    border: 1px solid blue;
}
.circle {
    border-radius: 50% !important;
    width: 12px;
    height: 12px;
    background-color: red;
    display: inline-block;
    position: absolute;
    top: 0px;
    /* width and height can be anything, as long as they're equal */
}
.bullet-title {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
    min-height: 34px;
    width: 200px;
    margin: 0px;
}
.bullet-title-container {
    color: black;
    display: inline-block;
    position: relative;
    width: 250px;
}
.bullet-details-container {
    color: black;
}
.bullet-container {
    max-width: 600px;
    float: left;
    text-align: left;
}

现在发生的事情是第一行总是太低，如果有多行，整个标题会被推得太高。我认为对齐两个内联块元素可以解决这个问题，但它似乎没有用。我做错了什么？

Answer 1

您可以尝试添加：

position: absolute;
top: 0;

到.bullet-title { }

http://jsfiddle.net/Ebqq8/2/

如何在固定高度div旁边对齐可变高度div？

1 个答案: