Question

如何应用css和html来设计一个模板，如下左侧的文本和右侧的图片图像（小部分）？

我尝试使用table方法，两列两行，但看起来，措辞不能一次显示必须分开不同的行。

Answer 1

不要使用桌子。使用a，将所有文本和图像放在父级中，然后在图像样式中将float属性指定为右侧。

这是id / class img {float：right;}

Answer 2

也许float可以帮到你。

＆＃13;

div {
    float: right;
    margin: 0 0 15px 20px;
    border: 1px solid black;
    text-align: center;
}
img{
width: 180px;
}

＆＃13;

<div>
<img src="https://www.visiontravel.ca/wp-content/uploads/2015/07/sailing-ship-300x300.jpg"><br>CSS is fun!
</div>

<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
In the paragraph above, the div element is 120 pixels wide and it contains the image.
The div element will float to the right. Margins are added to the div to push the text away from the div.
Borders and padding are added to the div to frame in the picture and the caption.
</p>

＆＃13;

如何对齐左侧的所有文本和右侧的图像

2 个答案: