HTML

Question

我有以下HTML代码

<div id="main">
    <div id="content">
        <h1>Title text</h1>
        <div style="width: 100px; height: 100px; background: red"></div>
    </div>
    <div id="right">
        <h2>Right title</h2>
    </div>
</div>

和css

#main {
    width: 230px
}
#content {
    float: left;
    width: 150px;
}
#right {
    float: right;
    width: 80px;
}
#right h2 {
    margin-top: 1em;
}

我希望Right title与红色方块的顶部对齐。问题是Title text可能很长，文本将放在两行上。我可以仅使用css来实现这一目标吗？

http://jsfiddle.net/6Rpkh/312/

Answer 1

我更改了html的CSS和结构，我将div #right,#right1放入内容并设置margin-top否定
CSS

#content, #content1 {
    float: left;
    width: 185px;
}
#right, #right1 {
    float: right;
    width: 80px;
    margin-top:-105px;
}
#right h2, #right1 h2 {
    margin-top: 0em;
}

HTML

  <div id="main">
        <div id="content">
            <h1>Title text</h1>
            <div style="width: 100px; height: 100px; background: red"></div>
        <div id="right">
            <h2>Right title</h2>
        </div>
        </div>

    </div>

    <br style="clear: both"><br><br>

    <div id="main1">
        <div id="content1">
            <h1>Very long title text on two lines</h1>
            <div style="width: 100px; height: 100px; background: red"></div>
         <div id="right1">
            <h2>Right title</h2>
        </div>
        </div>

    </div>

http://jsfiddle.net/6Rpkh/313/

Answer 2

可能会将结构重新制作为3个部分：标题，左侧和内容，而不是左侧和内容：

http://jsfiddle.net/78Lczwoq/

.square {
    float: left;
    background: red;
    width: 100px;
    height: 100px;
}
.header {
    margin-bottom: 20px;
}
.media {
    margin: 20px;
    padding: 20px;
    border: solid 1px #ccc;
    overflow: hidden;
}
.left {
    float: left;
}
.content {
    overflow: hidden;
    padding-left: 10px;
}

Answer 3

您实际上需要修改您的HTML。检查下面的小提琴：

#main, #main1 {
    width: 230px
}
#content, #content1 {
    width: 150px;
}
#right, #right1 {
    float: right;
    width: 80px;
}
#right h2, #right1 h2, .box {
    display: inline-block;
    vertical-align: top;
}

<强> Working Fiddle

Answer 4

以下是符合您要求的完美代码。

HTML

    <div id="main">
               <div id="inner_container">
                   <p class="top_title">Some long title here it automatically adjusts</p>
                      <div class="sq_box"> 
                   </div>
                   <div class="right_title">
                       hello
                   </div>

                </div>
            </div>

CSS

                    #main{
                width:400px;
                height:200px;
            }
            #inner_container{
                width:100%;
                height:auto;
            }
            p.top_title{
                width: 100px; 
                word-wrap: break-word;
            }
            .sq_box{
                width:100px;
                float:left;
                height:100px;
                background-color:red;
            }
            .right_title{
                float:left;
                margin-left:10%;
            }

JSFILDLE demo

这可以调整自己无需关心任何边际..它的健壮......

如何对齐来自两个不同div的文本

4 个答案:

HTML

CSS