2013-06-20 108 views
18

Tôi muốn văn bản và hình ảnh ở bên cạnh nhau nhưng tôi muốn hình ảnh ở bên trái màn hình và tôi muốn văn bản nằm ở phía xa bên phải của màn hình. Đây là những gì tôi hiện có ....Cách đặt Văn bản và Hình ảnh cạnh nhau trong HTML?

<body> 
<img src="website_art.png" height= "75" width= "235"/> 
<h3><font face="Verdana">The Art of Gaming</font></h3> 
</body> 

Tôi có thể làm như thế nào?

Cảm ơn

+0

CSS: 'float: left;' and 'float: right'? – tymeJV

+7

Thẻ '' đã bị xóa khỏi HTML5. Hãy loại bỏ nó và thay thế bằng CSS tương đương;) – lifetimes

+0

Bạn có thể sử dụng css để đặt chúng vào div và sử dụng float thích hợp: phải hoặc trái để có chúng trên các cạnh tương ứng. chiều rộng div có thể được thiết lập để cho phép bạn có "xa bên trái" và "xa bên phải" theo cách bạn muốn. – Josh

Trả lời

21
img { 
    float:left; 
} 
h3 { 
    float:right; 
} 

jsFiddle example

Lưu ý rằng có thể bạn sẽ muốn sử dụng phong cách clear:both trên bất kỳ yếu tố đưa ra sau khi các mã mà bạn cung cấp để nó không trượt lên trực tiếp bên dưới các phần tử nổi.

+1

Điều đó hoạt động khá tốt. Cảm ơn. – Combine

+0

Chỉ có vấn đề là div cha mẹ sẽ có kích thước và đó là vấn đề nếu bạn đang sử dụng màu nền, v.v. – User

+0

@User "div cha mẹ sẽ kích thước" nghĩa là gì? – j08691

3

Bạn muốn sử dụng css float cho việc này, bạn có thể đặt mã trực tiếp vào mã của mình.

<body> 
<img src="website_art.png" height= "75" width="235" style="float:left;"/> 
<h3 style="float:right;">The Art of Gaming</h3> 
</body> 

Nhưng tôi thực sự khuyên bạn nên tìm hiểu kiến ​​thức cơ bản về css và tách tất cả kiểu của bạn thành một tờ kiểu riêng biệt và sử dụng lớp học. Nó sẽ giúp bạn trong tương lai. Một nơi tốt để bắt đầu là w3schools hoặc, có thể sau đó xuống con đường, Mozzila Dev. Network (MDN).

HTML:

<body> 
    <img src="website_art.png" class="myImage"/> 
    <h3 class="heading">The Art of Gaming</h3> 
</body> 

CSS:

.myImage { 
    float: left; 
    height: 75px; 
    width: 235px; 
    font-family: Veranda; 
} 
.heading { 
    float:right; 
} 
0

Bạn có thể sử dụng vertical-align và nổi.

Trong hầu hết các trường hợp, bạn muốn căn chỉnh dọc: giữa, hình ảnh.

Dưới đây là một thử nghiệm: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align

vertical-align: cơ sở | dài | sub | siêu | đỉnh | text-top | trung | đáy | text-bottom | ban đầu | kế thừa;

Ở giữa, định nghĩa là: Phần tử được đặt ở giữa phần tử gốc.

Vì vậy, bạn có thể muốn áp dụng điều đó cho tất cả các phần tử trong phần tử.

Các vấn đề liên quan