Float hình trong 1 paragraph

Khi thiet ke web, chúng ta rất thường xuyên hiển thị 1 hinh nằm trong 1 paragraph. Chúng ta có thể chọn cách làm bằng 1 talbe, sau đó chia thành 2 cột. Nhưng dùng CSS thì việc dễ dàng hơn rất nhiều, chỉ cần thêm thuộc tính float cho hình thì hình sẽ được float về bên trái hoặc bên phải tùy vào yêu cầu của chúng ta. Xem ví dụ sau:

Code CSS

.tin-tuc{ background-color: Gray; border: solid 1px Black; width: 400px;}

.img-float-left{ float: left;margin: 5px 10px 5px 10px;}

Code HTML

</div

Kết quả

Live Demo | Download Source Code

Float hình left bằng CSS

Bạn có thể format paragraph theo ý của bạn, ví dụ: bạn muốn chia hình và text thành 2 cột như hình bên dưới, lúc đó chúng ta cần sửa thuộc tính margin của thẻ p

Code CSS

.tin-tuc{ background-color: Gray; border: solid 1px Black; width: 400px;}

.img-float-left{ float: left;margin: 5px 10px 5px 10px;}

.2-cot{ margin-left: 160px;}

Code HTML

</div>

Kết quả

Live Demo | Download Source Code

Float hình left, 2 cột bằng nhau