Html 3个元素的对齐（左、右1、右2）_Html_Css_Asp.net Mvc 4_Alignment

Html 3个元素的对齐（左、右1、右2）

html css asp.net-mvc-4

Html 3个元素的对齐（左、右1、右2）,html,css,asp.net-mvc-4,alignment,Html,Css,Asp.net Mvc 4,Alignment,我想为我的项目设计一个布局视图。布局视图的左角有一个图像，右角（同一行）有两行文字，一行在第1行，另一行在第2行。我如何做到这一点 <body> <div> <img src = "image" alt ="Logo" height = "120" width = "170"/> <div class = "r">Item 1.</div> </div> </body> 试试这个一线二线 .集装箱 {

我想为我的项目设计一个布局视图。布局视图的左角有一个图像，右角（同一行）有两行文字，一行在第1行，另一行在第2行。我如何做到这一点

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

试试这个


一线
二线
.集装箱
{
显示：内联块；
背景颜色：蓝色；
}
.形象
{
浮动：左；
高度：120px；
宽度：170px；
背景色：红色；
}
.对
{
浮动：左；
宽度：300px；
高度：120px；
背景颜色：绿色；
}

为什么不也尝试为.c使用左浮动呢

<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>

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

<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;
 }