Hướng dẫn how do i make 3 div horizontally in html? - làm cách nào để tạo 3 div theo chiều ngang trong html?

Question

73

Nội dung chính Show

Làm thế nào để tôi tạo ra một div ngang trong html?
Làm cách nào để sắp xếp các div theo chiều ngang?
Làm cách nào để hiển thị một phần tử div theo chiều ngang?
Làm thế nào để tôi làm cho các div bên cạnh nhau?

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đang tạo một trang web mẫu có ba bộ phận theo chiều ngang. Tôi muốn phần lớn div bên trái có chiều rộng 25%, phần giữa có chiều rộng 50% và bên phải có chiều rộng 25% để các bộ phận lấp đầy tất cả không gian 100% theo chiều ngang.

<html>
    <title>
    Website Title
    </title>

    <div id="the whole thing" style="height:100%; width:100%" >

        <div id="leftThing" style="position: relative; width:25%; background-color:blue;">
            Left Side Menu
        </div>

        <div id="content" style="position: relative; width:50%; background-color:green;">
            Random Content
        </div>

        <div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
            Right Side Menu
        </div>

    </div>
</html>

http://imgur.com/j4cJu

Khi tôi thực thi mã này, các div xuất hiện trên nhau. Tôi muốn họ xuất hiện bên cạnh nhau!

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

Lukas Kabrt

5.3714 Huy hiệu vàng42 Huy hiệu bạc58 Huy hiệu Đồng4 gold badges42 silver badges58 bronze badges

Hỏi ngày 13 tháng 8 năm 2012 lúc 9:06Aug 13, 2012 at 9:06

5

Tôi không sử dụng phao cho loại điều này; Tôi muốn sử dụng

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

1.

Một số điểm khác để xem xét:

Phong cách nội tuyến là xấu cho khả năng duy trì
Bạn không nên có khoảng trống trong tên bộ chọn

Bạn đã bỏ lỡ một số thẻ HTML quan trọng, như

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

2 và

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

3

Bạn đã không bao gồm một

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

4

Đây là một cách tốt hơn để định dạng tài liệu của bạn:

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

Đây là một jsfiddle cho biện pháp tốt.

Đã trả lời ngày 13 tháng 8 năm 2012 lúc 9:21Aug 13, 2012 at 9:21

Jezen Thomasjezen ThomasJezen Thomas

13.4K6 Huy hiệu vàng52 Huy hiệu bạc90 Huy hiệu Đồng6 gold badges52 silver badges90 bronze badges

2

Tôi biết đây là một câu hỏi rất cũ. Chỉ cần đăng bài này ở đây khi tôi giải quyết vấn đề này bằng FlexBox. Đây là giải pháp

#container {
  height: 100%;
  width: 100%;
  display: flex;
}
#leftThing {
  width: 25%;
  background-color: blue;
}
#content {
  width: 50%;
  background-color: green;
}
#rightThing {
  width: 25%;
  background-color: yellow;
}

<div id="container">

  <div id="leftThing">
    Left Side Menu
  </div>

  <div id="content">
    Random Content
  </div>

  <div id="rightThing">
    Right Side Menu
  </div>

</div>

Chỉ cần thêm

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

5 vào container! Không cần phao cần thiết.

Đã trả lời ngày 24 tháng 10 năm 2016 lúc 3:07Oct 24, 2016 at 3:07

Maazadeebmaazadeebmaazadeeb

5.7122 Huy hiệu vàng27 Huy hiệu bạc39 Huy hiệu Đồng2 gold badges27 silver badges39 bronze badges

Bạn có thể sử dụng các yếu tố nổi như vậy:

<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
    <div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
    <div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
    <div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>

Lưu ý tràn: ẩn; Trên thùng chứa cha mẹ, điều này là làm cho cha mẹ phát triển có cùng kích thước với các phần tử con (nếu không nó sẽ có chiều cao 0).overflow: hidden; on the parent container, this is to make the parent grow to have the same dimensions as the child elements (otherwise it will have a height of 0).

Đã trả lời ngày 13 tháng 8 năm 2012 lúc 9:09Aug 13, 2012 at 9:09

Paul Aldred-Bannpaul Aldred-BannPaul Aldred-Bann

5.7204 Huy hiệu vàng36 Huy hiệu bạc54 Huy hiệu Đồng4 gold badges36 silver badges54 bronze badges

2

Cách dễ nhất

Tôi có thể thấy câu hỏi được trả lời, tôi đang đưa ra câu trả lời này cho những người đang có câu hỏi này trong tương lai

Đó không phải là thực tế tốt để mã nội tuyến CSS và ID cho tất cả các div bên trong, luôn cố gắng sử dụng lớp để tạo kiểu. Sử dụng CSS nội tuyến là một thực tiễn rất tệ nếu bạn đang cố gắng trở thành một nhà thiết kế web chuyên nghiệp.ID for all inner div's , always try to use class for styling .Using inline css is a very bad practise if you are trying to be a professional web designer.

Ở đây trong câu hỏi của bạn, tôi đã đưa ra một lớp trình bao bọc cho Div cha mẹ và tất cả các div bên trong là con div của trẻ em trong CSS mà bạn có thể gọi bên trong Div bằng cách sử dụng bộ chọn NTH-con.nth-child selector.

Tôi muốn chỉ ra một vài điều ở đây

Không sử dụng CSS nội tuyến (đó là thực tế rất tệ)
Cố gắng sử dụng các lớp thay vì ID vì nếu bạn cung cấp ID, bạn chỉ có thể sử dụng nó một lần, nhưng nếu bạn sử dụng một lớp, bạn có thể sử dụng nó nhiều lần và bạn cũng có thể tạo kiểu cho chúng bằng cách sử dụng lớp đó để bạn viết ít mã hơn.

Liên kết codepen cho câu trả lời của tôi

https://codepen.io/feizel/pen/JELGyB

.wrapper {
  width: 100%;
}

.box {
  float: left;
  height: 100px;
}

.box:nth-child(1) {
  width: 25%;
  background-color: red;
}

.box:nth-child(2) {
  width: 50%;
  background-color: green;
}

.box:nth-child(3) {
  width: 25%;
  background-color: yellow;
}

<div class="wrapper">
  <div class="box">
    Left Side Menu
  </div>
  <div class="box">
    Random Content
  </div>
  <div class="box">
    Right Side Menu
  </div>
</div>

MPLUNGJAN

160K27 Huy hiệu vàng168 Huy hiệu bạc226 Huy hiệu Đồng27 gold badges168 silver badges226 bronze badges

Đã trả lời ngày 1 tháng 2 năm 2017 lúc 17:21Feb 1, 2017 at 17:21

0

Bạn thêm a

float: left;

Theo phong cách của 3 yếu tố và đảm bảo container cha mẹ có

overflow: hidden; position: relative;

Điều này đảm bảo các phao chiếm không gian thực tế.

<html>
    <head>
        <title>Website Title </title>
    </head>
    <body>
        <div id="the-whole-thing" style="position: relative; overflow: hidden;">
            <div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
                Left Side Menu
            </div>
            <div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
                Random Content
            </div>
            <div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
                Right Side Menu
            </div>
        </div>
    </body>
</html>

Ngoài ra, xin lưu ý rằng chiều rộng: 100% và chiều cao: 100% cần được loại bỏ khỏi container, nếu không khối thứ 3 sẽ kết thúc thành một dòng thứ 2.

Đã trả lời ngày 13 tháng 8 năm 2012 lúc 9:12Aug 13, 2012 at 9:12

NKCSSNKCSSNKCSS

2.7181 Huy hiệu vàng21 Huy hiệu bạc37 Huy hiệu đồng1 gold badge21 silver badges37 bronze badges

Loại bỏ

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

6 và thay thế nó bằng

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

7 và

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

8.

Ví dụ trong jsfiddle: http://jsfiddle.net/d9fhp/1/

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

0

Đã trả lời ngày 13 tháng 8 năm 2012 lúc 9:12Aug 13, 2012 at 9:12

NKCSSNKCSSMNilson

2.7181 Huy hiệu vàng21 Huy hiệu bạc37 Huy hiệu đồng1 silver badge8 bronze badges

Làm thế nào để tôi tạo ra một div ngang trong html?

Sử dụng float và lề, div bên trái được tạo kiểu với chiều rộng: 50% và float: trái - điều này tạo ra div màu xanh lá cây có chiều ngang một nửa màn hình.DIV bên phải sau đó được đặt thành lề trái: 50%-điều này ngay lập tức đặt nó ở bên phải của div bên trái. The left div is styled with width:50% and float:left – this creates the green colored div that horizontally covers half of the screen. The right div is then set to margin-left:50% – this immediately places it to the right of the left div.

Làm cách nào để sắp xếp các div theo chiều ngang?

Để trung tâm theo chiều ngang, một phần tử khối (như), sử dụng lề: tự động;Đặt chiều rộng của phần tử sẽ ngăn nó kéo dài ra các cạnh của container.use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.

Làm cách nào để hiển thị một phần tử div theo chiều ngang?

Bài viết này cho thấy cách sắp xếp các yếu tố div theo chiều ngang.Tạo các phần tử UI như trong phần sau: Số 1..

.Div ..

background-color:red;.

color:white;.

Biên giới: 1px rắn ;.

#parent..

Làm thế nào để tôi làm cho các div bên cạnh nhau?

Cách phổ biến nhất để đặt hai div bên cạnh là bằng cách sử dụng thuộc tính CSS khối nội tuyến.Thuộc tính khối nội tuyến trên cha mẹ đặt hai divs cạnh nhau và vì đây là tính năng liên kết, tính năng align văn bản hoạt động ở đây giống như một yếu tố nội tuyến.using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.

programming html Float center CSS