如何使從兩個不同的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

這種自我調整沒有必要去計較任何保證金..其強大的..