Question

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

Answer 1

试试这个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;
 }

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

1 个答案: