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）

回答

相关问题