Cách tốt nhất để căn chỉnh và căn trái hai thẻ div trên trang web theo chiều ngang bên cạnh nhau là gì? Tôi muốn một giải pháp thanh lịch để làm điều này nếu có thể.Cách tốt nhất để căn chỉnh và căn chỉnh hai thẻ div là gì?
<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>
<style>
#div1, #div2 {
float: left; /* or right */
}
</style>
Là một cách khác để nổi:
<style>
.wrapper{position:relative;}
.right,.left{width:50%; position:absolute;}
.right{right:0;}
.left{left:0;}
</style>
...
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
Xét rằng không có cần thiết phải xác định vị trí các div .left như tuyệt đối (tùy thuộc vào hướng của bạn, điều này có thể là một .right) do đó sẽ ở vị trí mong muốn trong dòng chảy tự nhiên của mã html.
giải pháp này hoạt động cũng với IE7 (câu trả lời được chấp nhận không: div đúng sẽ được thả nổi bên phải nhưng cũng 1 bị hỏng) – firepol
'.right, .left {width: 50%; display: inline-block} ' – sepehr
Nếu bạn có div bên dưới div bao bọc, nó sẽ thay thế div của trình bao bọc, một hiệu ứng không mong muốn. –
Bạn có thể làm điều đó với một vài dòng mã CSS. Bạn có thể căn chỉnh tất cả các div mà bạn muốn xuất hiện cạnh nhau sang bên phải.
<div class="div_r">First Element</div>
<div class="div_r">Second Element</div>
<style>
.div_r{
float:right;
color:red;
}
</style>
sử dụng đệm thẻ các thẻ phao trên didnt làm việc ra, tôi đã sử dụng
padding left:5px;
padding left :30px
tôi đã sử dụng dưới đây. Phần tử thể loại sẽ bắt đầu khi phần tử DJ kết thúc,
<div>
<div style="width:50%; float:left">DJ</div>
<div>genre</div>
</div>
tha thứ cho css nội tuyến.
Giải pháp này có văn bản và nút căn trái ở bên phải.
Nếu bất cứ ai đang tìm kiếm một câu trả lời thiết kế vật liệu:
<div layout="column" layout-align="start start">
<div layout="row" style="width:100%">
<div flex="grow">Left Aligned text</div>
<md-button aria-label="help" ng-click="showHelpDialog()">
<md-icon md-svg-icon="help"></md-icon>
</md-button>
</div>
</div>
Bạn có thể sử dụng một thẻ mẹ div như thế này:
<!doctype html>
<html>
<head>
<style>
.parent{
text-align:center;
}
.child{
width:45%;
display:inline-block;
border:1px solid #cccccc;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">First Element</div>
<div class="child">Second Element</div>
</div>
</body>
</html>
có thể trùng lặp của [cách tốt nhất để gắn kết hai nội tuyến là gì các phần tử span sang trái và phải không có float?] (http://stackoverflow.com/questions/41951530/what-is-the-best-way-to-align-two-inline-span-elements-to-left-and -ngưng-không) –