1

我想为我的项目设计一个布局视图。布局视图在左角有一个图像，在右角（同一行）将有 2 行单词，一个在第 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%;
        }
4

1 回答 1

0

试试这个结果

<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-31T03:41:25.457 回答