gpt4 book ai didi

html - 3 个元素的对齐方式(左、右 1、右 2)

转载 作者:太空宇宙 更新时间:2023-11-03 18:43:59 29 4
gpt4 key购买 nike

我想为我的元素设计布局 View 。布局 View 在左 Angular 和右 Angular (同一行)有一个图像,将有 2 行单词,一行在第 1 行,另一行在第 2 行。我该如何实现?

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

到目前为止,我可以在左边做 1 项,在右边做 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%;
}

最佳答案

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

关于html - 3 个元素的对齐方式(左、右 1、右 2),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16849314/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com