問題並排對齊兩個div

我想並排對齊兩個div - 一個div包含圖像，另一個包含有關圖像中人物的文本（即配置文件），我無法確定儘管如何讓div排列在一起，但我嘗試過漂浮和使用表格單元顯示，並且它似乎永遠不會粘住。也許別人可以爲我解決這個問題？問題並排對齊兩個div

HTML

<div id="tai-prof"> 
    <div class="prof-content"> 
     <div class="picture"> 
      <img src="http://i.imgur.com/BXgeNF3.png"> 
     </div> 
     <div class="profile"> 
      <div class="prof-desc"> 
       <h2>Name</h2> 

       <h2 class="desc">Description</h2> 

       <h2 class="email">email (maybe)</h2> 

       <span class="prof-bio">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally</span> 
       <span class="sites"> <a href="#">www.mysite.com</a> | <a href="#">www.mypage.com</a> | <a href="#">my blog</a> 

       </span> 
      </div> 
     </div> 
    </div> 
</div>

CSS

.prof-content, .profile { 
    float: left; 
} 
.prof-content .picture { 
    float: left; 
} 
.prof-content .picture img { 
    width: 45%; 
} 
.prof-content .prof-desc { 
    display: table-cell; 
    /*position: relative; 
    left: -25%;*/ 
}

來源

2013-11-03 Tai M.

請澄清什麼是你想要的結果。你想讓所有的描述位於圖像右側的區域嗎？即'picture'和'profile'是並排的？ '排隊'是什麼意思？垂直？水平？ – frozenkoi

@frozenkoi抱歉，如果它不清楚，但是，我希望圖片和整個說明是一邊按大小（水平） –

類似（如果不重複）與圖片問題（誰不喜歡的圖片？）：http：/ /stackoverflow.com/questions/5943166/vertical-alignment-of-text-in-a-table-cell – frozenkoi

如果您的問題使用display: table-cell時是文本的第一行有它上方的空間則很可能忘在默認情況下該表格單元格上其基線垂直對齊。而且，由於第一個單元格中有圖像，因此該圖像的底部與文本第一行底部的底部對齊。

所以請記住使用vertical-align: top到你需要對齊頂部邊緣（或任何你需要的）的單元格。

使用您的相同的HTML：

<div id="tai-prof"> 
     <div class="prof-content"> 
      <div class="picture"> 
       <img src="http://i.imgur.com/BXgeNF3.png"> 
      </div> 
      <div class="profile"> 
       <div class="prof-desc"> 
        <h2>Name</h2> 

        <h2 class="desc">Description</h2> 

        <h2 class="email">email (maybe)</h2> 

        <span class="prof-bio">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally</span> 
        <span class="sites"> <a href="#">www.mysite.com</a> | <a href="#">www.mypage.com</a> | <a href="#">my blog</a> 

        </span> 
       </div> 
      </div> 
     </div> 
    </div>

更改CSS來：

#tai-prof {display: table} 

    .prof-content {display: table-row} 

    .prof-content, .profile , 
    .prof-content .picture { 
     display: table-cell; 
     vertical-align: top; 
    } 

    .prof-content .picture {width: 30%} 
    .prof-content .picture img { 
     width: 100%; 
    }

來源

2013-11-03 12:17:32 frozenkoi

謝謝，這工作完美！ –

檢查你的CSS

.prof-content, .profile { 
    float: left; 
} 
.prof-content, .picture { 
    float: left; 
} 
.prof-content, .picture, img { 
    width: 45%; 
} 
.prof-content .prof-desc { 
    display: table-cell; 
    /*position: relative; 
    left: -25%;*/ 
}

你失蹤逗號

來源

2013-11-03 06:54:27 cactusboat

這應該是你的CSS：

.prof-content .profile, .prof-content .picture { 
float: left; 
width:50%; 
} 
.prof-content .picture img { 
    width: 90%; 
}

見小提琴這裏：http://jsfiddle.net/rqPVD/1/

來源

2013-11-03 11:03:36 Thiousi

問題並排對齊兩個div

回答

相關問題