3個元素的對齊（左，右1，右2）

我想爲我的項目設計一個佈局視圖。佈局視圖在左上角和右上角有一個圖像（同一行），會有兩行文字，一行在第一行，另一行在第二行。我該怎麼做到這一點？3個元素的對齊（左，右1，右2）

<body> 
<div> 
<img src = "image" alt ="Logo" height = "120" width = "170"/> 
<div class = "r">Item 1.</div> 
</div> 
</body>

到目前爲止，我可以在左邊和右邊的1項。

<body> 
<div> 
<img src = "Image" alt ="Logo" height = "120" width = "170"/> 
<div class = "r">Item 1.</div> 
**<div class = "r">Item 2.</div>** 
</div> 
</body>

如果我在第二項中添加它將出現在圖像後面的行。我想要的是，右邊的兩條線都與左邊的圖像保持一致。

我的CSS文件是一樣的東西

 .r 
     { 
      float:right; 
      width: 33%; 
     } 
     .l 
     { 
      float:left; 
      width: 33%; 
     }  
     .c 
     { 
      text-align:center; 
      width: 34%; 
     }

來源

2013-05-31 sniggy

你爲什麼不嘗試左浮動的.C太 – edd

試試這個Result

<div class="container"> 
<div class="image"> 
    <img src = "image" alt ="Logo" height = "120" width = "170"/> 
</div> 
<div class="right"> 
    <p>1st line</p> 
    <p>2nd line</p> 
</div> 
</div> 


.container 
{ 
display:inline-block; 
background-color:blue; 
} 
.image 
{ 
    float:left; 
    height:120px; 
    width:170px; 
    background-color:red; 
} 
.right 
{ 
    float:left; 
    width:300px; 
    height:120px; 
    background-color:green; 
}

來源

2013-05-31 03:41:25

3個元素的對齊（左，右1，右2）

回答

相關問題