Saya ingin menempatkan dua <div>
s di samping satu sama lain. Yang tepat <div>
adalah tentang 200px; dan kiri <div>
harus mengisi seluruh layar lebar? Bagaimana saya bisa melakukan ini?
Anda dapat menggunakan flexbox untuk meletakkan barang-barang anda:
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
/* Just so it's visible */
}
#wide {
flex: 1;
/* Grow to rest of container */
background: lightgreen;
/* Just so it's visible */
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
Ini pada dasarnya hanya menggores permukaan flexbox. Flexbox dapat melakukan hal-hal menakjubkan.
Untuk browser yang lebih tua mendukung, anda dapat menggunakan CSS pelampung dan lebar properti untuk menyelesaikannya.
#narrow {
float: right;
width: 200px;
background: lightblue;
}
#wide {
float: left;
width: calc(100% - 200px);
background: lightgreen;
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
Saya don't tahu apakah ini masih menjadi masalah saat ini atau tidak, tapi aku hanya mengalami masalah yang sama dan menggunakan CSS display: inline-block;
tag.
Pembungkus ini di div sehingga mereka dapat diposisikan dengan tepat.
<div>
<div style="display: inline-block;">Content1</div>
<div style="display: inline-block;">Content2</div>
</div>
Perhatikan bahwa menggunakan gaya inline atribut itu hanya digunakan untuk keringkasan dari contoh ini tentu saja ini akan dipindahkan ke sebuah file CSS eksternal.
Sayangnya, ini bukan hal yang sepele untuk memecahkan kasus umum. Hal yang paling mudah akan untuk menambahkan css-style property "float: right;" untuk anda 200px div, namun, hal ini juga akan menyebabkan anda "main"-div benar-benar menjadi lebar penuh dan teks di sana akan mengapung di sekitar tepi 200px-div, yang sering terlihat aneh, tergantung pada konten (cukup banyak dalam semua kasus kecuali jika itu's mengambang gambar).
EDIT: Seperti yang disarankan oleh Dom, pembungkus masalah tentu bisa diselesaikan dengan margin. Konyol saya.
Metode yang disarankan oleh @roe dan @MohitNanda bekerja, tetapi jika benar div ditetapkan sebagai float:right;
, maka itu harus datang pertama dalam sumber HTML. Ini istirahat kiri-ke-kanan baca rangka, yang dapat membingungkan jika halaman ditampilkan dengan gaya dimatikan. Jika itu's terjadi, itu mungkin akan lebih baik untuk menggunakan pembungkus div dan posisi absolut:
<div id="wrap" style="position:relative;">
<div id="left" style="margin-right:201px;border:1px solid red;">left</div>
<div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>
Menunjukkan:
Edit: Hmm, menarik. Jendela pratinjau menunjukkan diformat dengan benar divs, tapi diberikan post item tidak. Maaf kemudian, anda'll harus mencoba ini untuk diri sendiri.
Aku berlari ke dalam masalah ini hari ini. Berdasarkan solusi di atas, ini bekerja untuk saya:
<div style="width:100%;">
<div style="float:left;">Content left div</div>
<div style="float:right;">Content right div</div>
</div>
Cukup membuat orang tua div span lebar penuh dan mengapung div terkandung dalam.
UPDATE
Jika anda perlu untuk menempatkan elemen-elemen dalam satu baris, anda dapat menggunakan Flex tata Letak. Di sini anda memiliki lain Flex tutorial. It's CSS alat dan meskipun hal ini tidak 100% kompatibel, setiap hari dukungan semakin baik. Ini bekerja sebagai sederhana seperti:
HTML
<div class="container">
<div class="contentA"></div>
<div class="contentB"></div>
</div>
CSS
.container {
display: flex;
width: 100%;
height: 200px;
}
.contentA {
flex: 1;
}
.contentB {
flex: 3;
}
Dan apa yang anda dapatkan di sini adalah sebuah wadah dengan ukuran total 4 unit, yang berbagi ruang dengan anak-anak dalam hubungan 1/4 dan 3/4.
Saya telah melakukan sebuah contoh di CodePen yang memecahkan masalah anda. Saya harap ini membantu.
http://codepen.io/timbergus/pen/aOoQLR?editors=110
SANGAT TUA
Mungkin ini hanya sebuah omong kosong, tetapi apakah anda mencoba dengan meja? Tidak langsung menggunakan CSS untuk posisi divs, tetapi bekerja dengan baik.
Anda dapat membuat 1x2 meja dan menempatkan anda div
di dalam, dan kemudian memformat tabel dengan CSS untuk menempatkan mereka seperti yang anda inginkan:
<table>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
</table>
Catatan
Jika anda ingin menghindari menggunakan tabel, seperti yang dikatakan sebelumnya, anda dapat menggunakan float: left;
dan float: right;
dan unsur berikut, don't lupa untuk menambahkan clear: left;
, clear: right;
atau clear: both;
dalam rangka untuk memiliki posisi dibersihkan.
Aku berlari ke dalam masalah yang sama dan Mohits versi bekerja. Jika anda ingin menyimpan kiri-kanan agar dalam html, hanya mencoba ini. Dalam kasus saya, kiri div menyesuaikan ukuran, hak div tetap pada lebar 260px.
HTML
<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>
CSS
.box {
height: 200px;
padding-right: 260px;
}
.box .left {
float: left;
height: 200px;
width: 100%;
}
.box .right {
height: 200px;
width: 260px;
margin-right: -260px;
}
Caranya adalah dengan menggunakan padding kanan pada kotak utama tetapi menggunakan ruang itu lagi dengan menempatkan kotak kanan lagi dengan margin kanan.
Ini won't menjadi jawaban untuk semua orang, karena hal ini tidak didukung di IE7-, tapi anda bisa menggunakannya dan kemudian menggunakan alternatif jawaban untuk IE7-. Ini adalah tampilan: meja, display: table-row dan display: table-cell. Catatan bahwa ini tidak menggunakan tabel untuk layout, tapi styling div sehingga hal-hal yang berbaris baik dengan semua kerumitan dari atas. Tambang adalah sebuah aplikasi html5, sehingga karya-karya besar.
Artikel ini menunjukkan sebuah contoh: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/
Berikut adalah apa yang stylesheet anda akan terlihat seperti:
.container {
display: table;
width:100%;
}
.left-column {
display: table-cell;
}
.right-column {
display: table-cell;
width: 200px;
}
Karena semua orang telah menunjukkan, anda'll melakukan hal ini dengan menetapkan float:right;
pada RHS konten dan negatif margin pada LHS.
Namun.. jika anda don't menggunakan float: left;
pada LHS (sebagai Mohit tidak) maka anda'll mendapatkan loncatan efek karena LHS div masih akan mengkonsumsi margin'd ruang di tata letak.
Namun.. LHS float akan shrink-wrap konten, sehingga anda'akan perlu untuk memasukkan didefinisikan lebar childnode jika itu's tidak dapat diterima, di mana titik anda mungkin juga telah didefinisikan lebar pada orang tua.
Namun.. seperti David poin anda dapat mengubah baca-order markup untuk menghindari LHS mengapung kebutuhan, tapi yang's telah dibaca dan mungkin masalah aksesibilitas.
Namun.. masalah ini dapat diselesaikan dengan mengapung diberikan beberapa tambahan markup
(peringatan: I don't menyetujui .kliring div pada contoh ini, lihat di sini untuk rincian)
Semua hal dipertimbangkan, saya pikir sebagian besar dari kita berharap ada non-serakah lebar:yang tersisa di CSS3...
Saya menggunakan campuran mengapung dan overflow-x:hidden. Kode Minimal, selalu bekerja.
- PLUS anda don't perlu untuk anda mengapung!.left-half{
width:200px;
float:left;
}
.right-half{
overflow-x:hidden;
}
Mengutip salah satu website saya yang melakukan hal serupa:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style TYPE="text/css"><!--
.section {
_float: right;
margin-right: 210px;
_margin-right: 10px;
_width: expression( (document.body.clientWidth - 250) + "px");
}
.navbar {
margin: 10px 0;
float: right;
width: 200px;
padding: 9pt 0;
}
--></style>
</head>
<body>
<div class="navbar">
This will take up the right hand side
</div>
<div class="section">
This will fill go to the left of the "navbar" div
</div>
</body>
</html>