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

Question

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

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

Answer 1

也许float可以帮助你。

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

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

Answer 2

请勿使用表格。使用a，将所有文本和图像放入父级，然后在图像样式中指定float属性。

这是ID/IMG级浮法{：权利;}