如何使从两个不同的div

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

这种自我调整没有必要去计较任何保证金..其强大的..