Có cách nào thanh lịch để căn chỉnh 3 thành phần bên trái, giữa và bên phải trên cùng một dòng không?CSS cùng một dòng căn chỉnh
Hiện tại tôi đang sử dụng 3 <div> tất cả đều có chiều rộng: 33%; float: left; và nó không hoạt động tốt.
Làm nổi bật hai chữ cái đầu tiên bên trái và thả phần thứ ba bên phải, đồng thời đảm bảo độ rộng phù hợp với đường kẻ bạn đang đặt chúng.
Sử dụng độ rộng pixel nếu thiết kế của bạn cho phép.
mà làm việc cho tôi:
<html>
<head>
<style>
div.fl {
float: left;
width: 33%;
}
div.fr {
float: right;
width: 33%;
}
</style>
</head>
<body>
<div class="fl">
A
</div>
<div class="fl">
B
</div>
<div class="fr">
C
</div>
</body>
</html>
gì bạn có nghĩa giống nhau không?
Float LeftBlock 'left', CenterBlock 'none' và RightBlock 'right'. Nhưng đảm bảo rằng phần tử Trung tâm xuất hiện cuối cùng trên trang HTML của bạn, nếu không nó sẽ không hoạt động.
Bạn có thể nhận được kết quả lạ nếu có bất kỳ lề nào trong phần tử bạn thêm vào. Đây là nơi mà width: 33% có thể không hoạt động vì bạn sẽ cần phải tính đến số lượng phần tử mà phần tử có.
<html>
<head>
<title></title>
<style type="text/css">
div { float: left; width: 33%; margin: 4px; }
</style>
</head>
<body>
<div style="border: 1px solid #ff0000;">1</div>
<div style="border: 1px solid #00ff00;">2</div>
<div style="border: 1px solid #0000ff;">3</div>
</body>
</html>
Điều này sẽ khiến nó không hoạt động như mong đợi vì số tiền ký quỹ được thêm vào mỗi div. Tương tự, nếu bạn thêm quá nhiều đường viền vào mỗi div, bạn sẽ nhận được kết quả tương tự border: 5px solid !important;
Ngay sau khi bạn lấy lề từ mã trên, nó sẽ hoạt động như mong đợi.
Hãy thử điều này:
<div style="float: left; width: 100px;">
left
</div>
<div style="float: right; width: 100px;">
right
</div>
<div style="width: 100px; margin: 0 auto;">
center
</div>
Bạn cần phải đưa vào tài khoản mà trái và phải divs không đẩy hộp container (một div xung quanh mã ở trên) chiều cao xuống, ngay cả khi họ có nội dung hơn trung tâm div, người duy nhất không được thả nổi. Một clearfix sẽ chăm sóc này.
Đây lại là một varition của đề tài: -
<html>
<head>
<style type="text/css">
div div {border:1px solid black}
div.Center {width:34%; float:left; text-align:center}
div.Left {float:left; width:33%; text-align:left}
div.Right {float:right; width:33%; text-align:right}
</style>
</head>
<body>
<div class="Left"><div>Left</div></div><div class="Center"><div>Center</div></div><div class="Right"><div>Right</div></div>
</body>
</html>
Lưu ý rằng biên giới là có thể bằng cách sử dụng một div bên trong cho mỗi divs 'bảng'. Cũng cung cấp cho trung tâm vẫn còn 1% pixel.
Tôi đã tạo một trang có cả ba phương pháp để so sánh tại http://www.salestime.com/Ref/LeftCenterRight.html.
Điều này phù hợp với tôi. Tôi không biết nếu đó là thanh lịch nhất, nhưng nó làm công việc: nó phản ứng tốt với nội dung "ô" và thay đổi kích thước.
<html>
<head>
<style>
.a {
border: 1px dotted grey;
padding: 2px;
margin: 2px;
}
.l {
border: 1px solid red;
background-color: #fee;
float:left;
}
.c {
border: 1px solid green;
background-color: #efe;
text-align:center;
}
.r {
border: 1px solid blue;
background-color: #eef;
float:right;
}
</style>
</head>
<body>
<div class="a">
<div class="l">
</div>
<div class="r">
toto v.2 adfsdfasdfa sdfa dfas asdf
</div>
<div class="c">
item 1 | tiem 2 | asdf 3 | asdfad asd | aasdfadfadfads
</div>
</div>
</body>
</html>
bạn có thể đính kèm mẫu mã đầy đủ không? – bendewey
mẫu mã sẽ giúp ích. –