Bagaimana cara membuat div mengisi ruang horisontal yang tersisa?


419

Saya memiliki 2 div: satu di sisi kiri dan satu di sisi kanan halaman saya. Yang di sisi kiri memiliki lebar tetap dan saya ingin yang di sebelah kanan mengisi ruang yang tersisa.

#search {
  width: 160px;
  height: 25px;
  float: left;
  background-color: #ffffff;
}

#navigation {
  width: 780px;
  float: left;
  background-color: #A53030;
}
<div id="search">Text</div>
<div id="navigation">Navigation</div>


11
Hapus properti width dan float di navigasi #na dan itu akan berhasil.
Johan Leino


1
@alexchenco: Anda mungkin ingin memperbarui jawaban yang Anda pilih untuk jawaban yang disediakan oleh Hank
Adrien Be

@ AdrienBe sebenarnya jika Anda melihat jawaban mystrdat saya pikir yang satu ini lebih baik. Ini hanya satu baris css dan itu satu-satunya yang bekerja untuk saya (saya membuat tiga kolom dengan float: kiri; pada dua kolom pertama dengan lebar tetap dan melimpah: otomatis pada yang terakhir dan bekerja dengan baik)
edwardtyl

@ Edwardtyl cukup adil. Sebenarnya, tampaknya menggunakan teknik yang sama dengan jawaban yang saya berikan untuk stackoverflow.com/questions/4873832/…
Adrien Be

Jawaban:


71

Ini sepertinya untuk mencapai apa yang Anda inginkan.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}
<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>


8
Anda harus menghapus lebarnya: 100% pada div yang tepat meskipun untuk membuatnya berfungsi.
Johan Leino

250
Solusi ini sebenarnya memiliki masalah. Coba hapus warna dari elemen KIRI. Anda akan melihat warna dari elemen KANAN sebenarnya bersembunyi di bawahnya. Konten tampaknya pergi ke tempat yang tepat, tetapi div KANAN itu sendiri tidak.
Vyrotek

5
+1 Memecahkan masalah saya juga. Apa yang saya pelajari adalah bahwa saya harus menghapus "float: left" pada kolom pengisian. Saya pikir itu akan membuat halaman meledak
keyser

12
Mungkin baik untuk memperhatikan bahwa pernyataan Vyroteks benar, tetapi dapat diselesaikan dengan overflow: disembunyikan di kolom kanan. Denzel menyebutkan ini, tetapi jawabannya bukan jawaban yang diterima, jadi Anda bisa melewatkan itu ...
Ruudt

45
Ini jelas salah, elemen kanan memiliki ukuran penuh, hanya saja isinya melayang di sekitar elemen kiri. Ini bukan solusi, hanya lebih banyak kebingungan.
mystrdat

268

Masalah yang saya temukan dengan jawaban Boushley adalah bahwa jika kolom kanan lebih panjang dari kiri itu hanya akan membungkus kiri dan melanjutkan mengisi seluruh ruang. Ini bukan perilaku yang saya cari. Setelah mencari melalui banyak 'solusi' saya menemukan tutorial (sekarang tautan sudah mati) untuk membuat tiga halaman kolom.

Penulis menawarkan tiga cara berbeda, satu lebar tetap, satu dengan tiga kolom variabel dan satu dengan kolom luar tetap dan tengah lebar variabel. Jauh lebih elegan dan efektif daripada contoh lain yang saya temukan. Secara signifikan meningkatkan pemahaman saya tentang tata letak CSS.

Pada dasarnya, dalam kasus sederhana di atas, mengambang kolom pertama ke kiri dan beri lebar tetap. Lalu beri kolom di sebelah kanan margin kiri yang sedikit lebih lebar dari kolom pertama. Itu dia. Selesai Kode Ala Boushley:

Berikut ini demo di Stack Snippets & jsFiddle

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}
<div id="left">  left  </div>
<div id="right"> right </div>

Dengan contoh Boushley kolom kiri memegang kolom lainnya di sebelah kanan. Begitu kolom kiri berakhir, kanan mulai mengisi seluruh ruang lagi. Di sini kolom kanan hanya menyelaraskan lebih jauh ke dalam halaman dan kolom kiri menempati margin lemak yang besar. Tidak diperlukan interaksi aliran.


Ketika Anda menutup tag div, konten setelah div itu harus ditampilkan di baris baru tetapi itu tidak terjadi. Bisakah Anda jelaskan mengapa?
fuddin

seharusnya: margin-left: 190px; Anda lupa ';'. Juga margin-kiri harus 180px.
fuddin

4
Catatan: jika Anda ingin elemen lebar tetap di sebelah kanan, pastikan untuk menempatkannya terlebih dahulu dalam kode atau tetap akan didorong ke baris berikutnya.
Trevor

2
@RoniTovi, elemen apung harus muncul sebelum elemen yang tidak mengambang di html Anda. jsfiddle.net/CSbbM/127
Hank

6
Jadi, bagaimana Anda melakukan ini jika Anda ingin menghindari lebar yang tetap? Dengan kata lain, izinkan kolom kiri hanya selebar yang seharusnya, dan kolom kanan untuk mengambil sisanya?
Patrick Szalapski

126

Solusinya datang dari properti tampilan.

Pada dasarnya Anda perlu membuat dua divs bertindak seperti sel tabel. Jadi, alih-alih menggunakan float:left, Anda harus menggunakan display:table-celldi kedua divs, dan untuk div lebar dinamis Anda perlu mengatur width:auto;juga. Kedua div harus ditempatkan dalam wadah 100% lebar dengan display:tableproperti.

Inilah css:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

Dan HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

PENTING: Untuk Internet Explorer Anda perlu menentukan properti float pada div lebar dinamis, jika tidak ruang tidak akan terisi.

Saya harap ini akan menyelesaikan masalah Anda. Jika mau, Anda dapat membaca artikel lengkap yang saya tulis tentang ini di blog saya .


3
Tidak berfungsi ketika konten di dalam div dengan lebar: otomatis lebih besar dari sisa ruang yang tersedia di viewport.
Nathan Loyer

4
@einord, solusi ini tidak menggunakan tabel, dan saya sadar bahwa tabel harus digunakan hanya untuk data tabular. Jadi, di luar konteks di sini. Tabel aktual dan tampilan: properti tabel (+ variasi lainnya) adalah hal yang sangat berbeda.
Mihai Frentiu

1
@Mihai Frentiu, dengan cara apa menampilkan: tabel berbeda dari elemen tabel sebenarnya? Saya benar-benar ingin mempelajari ini jika semuanya benar-benar berbeda, terima kasih. =)
einord

2
@einord, menggunakan tabel HTML menyiratkan definisi struktur seluruh tabel dalam kode HTML. Model tabel CSS memungkinkan Anda untuk membuat hampir semua elemen berperilaku seperti elemen tabel tanpa mendefinisikan pohon tabel keseluruhan.
Mihai Frentiu

1
@Mihai Frentiu, terima kasih atas jawabannya. Tetapi bukankah perilaku elemen tabel setengah dari masalah dengan menggunakan tabel sebagai elemen desain?
einord

123

Saat ini, Anda harus menggunakan flexboxmetode ini (dapat disesuaikan dengan semua browser dengan awalan browser).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Info lebih lanjut: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Lihat www.w3schools.com/cssref/css3_pr_flex-grow.asp untuk penjelasan yang baik tentang atribut CSS. Solusi modern sederhana tetapi mungkin tidak berfungsi di browser lama.
Edward

4
Flexbox FTW ... Saya sudah mencoba semua solusi lain di utas ini, tidak ada yang berhasil, saya coba solusi flexbox ini, langsung berfungsi ... CSS klasik (yaitu sebelum munculnya flexbox dan css grid) benar-benar payah di tata letak ... aturan flex dan grid :-)
leo

Ini harus diterima sebagai solusi yang dipilih untuk saat ini. Juga, ini adalah satu-satunya solusi "non-hackish".
Greg

ini bekerja seperti pesona, menyelamatkan hari saya!
lisnb

tsbaa (ini seharusnya jawaban yang diterima)
Ryo

104

Karena ini adalah pertanyaan yang agak populer, saya cenderung berbagi solusi yang bagus menggunakan BFC.
Contoh codepen berikut di sini .

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

Dalam hal ini, overflow: automemicu perilaku konteks dan membuat elemen yang tepat berkembang hanya ke lebar yang tersedia dan secara alami akan berkembang menjadi lebar penuh jika .leftmenghilang. Trik yang sangat berguna dan bersih untuk banyak tata letak UI, tetapi mungkin sulit untuk memahami "mengapa ia bekerja" pada awalnya.


1
Dukungan browser untuk overflow. IE4 !!! w3schools.com/cssref/pr_pos_overflow.asp
Yevgeniy Afanasyev

1
Kadang-kadang saya berakhir dengan scrollbar horizontal yang tidak berguna pada elemen .right. Apa masalahnya di sana?
Patrick Szalapski

1
@ PatrickSzalapski Bisakah Anda membuat codepen atau sejenisnya? Overflow autodapat memicu itu tergantung pada isinya. Anda juga dapat menggunakan nilai luapan lainnya untuk mendapatkan efek yang sama, hiddenmungkin lebih baik untuk kasus Anda.
mystrdat

1
Apa artinya BFC, dan adakah tutorial umum yang bagus menjelaskan BFC di web?
lulalala

1
@ lalalala singkatan dari konteks pemformatan blok . Berikut penjelasan yang
bobo

23

Jika Anda tidak memerlukan kompatibilitas dengan versi browser tertentu (misalnya IE 10 8 atau kurang), Anda dapat menggunakan calc()fungsi CSS:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

1
IE 9 dan lebih tinggi mendukung atribut calc. Satu-satunya masalah dengan solusi ini adalah mungkin kita tidak tahu lebar kolom sebelah kiri atau perubahannya.
Arashsoft

baik, solusi ini mungkin berorientasi pada kasus yang fleksibel dan dengan asumsi bahwa Anda tidak tahu atau Anda tidak peduli lebar wadah induk. Dalam pertanyaan @alexchenco mengatakan bahwa dia ingin mengisi "ruang yang tersisa" jadi ... saya pikir valid :) dan ya, IE 9 juga didukung, terima kasih atas catatannya;)
Marcos B.

15

Jawaban @ Boushley adalah yang terdekat, namun ada satu masalah yang tidak diatasi yang telah ditunjukkan. The kanan div mengambil seluruh lebar browser; konten mengambil lebar yang diharapkan. Untuk melihat masalah ini dengan lebih baik:

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

Konten berada di tempat yang benar (di Firefox), namun lebarnya salah. Ketika elemen anak mulai mewarisi lebar (misalnya tabel dengan width: 100%) mereka diberi lebar sama dengan browser yang menyebabkan mereka meluap dari kanan halaman dan membuat bilah gulir horizontal (di Firefox) atau tidak melayang dan didorong ke bawah ( dalam chrome).

Anda dapat memperbaiki ini dengan mudah dengan menambahkan overflow: hiddenke kolom kanan. Ini memberi Anda lebar yang benar untuk konten dan div. Selanjutnya, tabel akan menerima lebar yang benar dan mengisi lebar yang tersisa tersedia.

Saya mencoba beberapa solusi lain di atas, mereka tidak bekerja sepenuhnya dengan kasus tepi tertentu dan terlalu berbelit-belit untuk menjamin memperbaikinya. Ini berfungsi dan sederhana.

Jika ada masalah atau masalah, jangan ragu untuk melaporkannya.


1
overflow: hiddenmemang memperbaiki ini, terima kasih. (Jawaban yang ditandai salah BTW karena rightsebenarnya mengambil semua ruang yang tersedia pada orang tua, Anda dapat melihat ini di semua browser saat memeriksa elemen)
huysentruitw

1
Adakah yang bisa menjelaskan mengapa ini bekerja persis? Saya tahu saya telah melihat penjelasan yang baik di suatu tempat di sini, tetapi sepertinya saya tidak dapat menemukannya.
tomswift

2
Pengaturan @tomswift overflow: hiddenmenempatkan kolom kanan dalam konteks pemformatan bloknya sendiri. Elemen blok mengambil semua ruang horisontal yang tersedia bagi mereka. Lihat: developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
John Kurlak

The overflow:xxxatribut kuncinya. Seperti yang Anda katakan, itu berhenti #rightberkembang di bawahnya #left. Ini sangat rapi memecahkan masalah yang saya alami menggunakan jQuery UI resizable - dengan #rightset dengan atribut overflow dan #leftdiatur sebagai resizable, Anda memiliki batas bergerak sederhana. Lihat jsfiddle.net/kmbro/khr77h0t .
kbro

13

Berikut adalah sedikit perbaikan untuk solusi yang diterima, yang mencegah kolom kanan jatuh di bawah kolom kiri. Diganti width: 100%;dengan overflow: hidden;solusi yang rumit, jika seseorang tidak mengetahuinya.

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[Sunting] Juga periksa contoh untuk tata letak tiga kolom: http://jsfiddle.net/MHeqG/3148/


1
Solusi sempurna untuk nav bar fleksibel dengan logo tetap.
Trunk

5

Jika Anda mencoba mengisi ruang yang tersisa di dalam kotak fleksibel antara 2 item, tambahkan kelas berikut ke div kosong di antara 2 item yang ingin Anda pisahkan:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

4

Menggunakan display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>

1
Jawaban ini menduplikasi jawaban Jordan dari 2014.
TylerH

3

Jawaban Boushley tampaknya menjadi cara terbaik untuk mengatur agar menggunakan pelampung ini. Namun, ini bukan tanpa masalah. Apung bersarang di dalam elemen yang diperluas tidak akan tersedia untuk Anda; itu akan merusak halaman.

Metode yang ditampilkan pada dasarnya "palsu" ketika datang ke elemen ekspansi - itu tidak benar-benar mengambang, itu hanya bermain bersama dengan elemen mengambang lebar tetap menggunakan marginnya.

Masalahnya kemudian adalah bahwa: elemen yang mengembang tidak melayang. Jika Anda mencoba dan memiliki nested mengapung di dalam elemen ekspansi, item melayang "bersarang" itu tidak benar-benar bersarang sama sekali; ketika Anda mencoba untuk menempel di clear: both;bawah item mengambang "bersarang" Anda, Anda akan berakhir membersihkan float tingkat atas juga.

Kemudian, untuk menggunakan solusi Boushley, saya ingin menambahkan bahwa Anda harus meletakkan div seperti berikut: .fakeFloat {height: 100%; lebar: 100%; mengapung: kiri; } dan letakkan ini langsung di dalam div yang diperluas; semua konten div yang diperluas harus masuk ke dalam elemen FakeFloat ini.

Untuk alasan ini, saya akan merekomendasikan menggunakan tabel dalam kasus khusus ini. Elemen apung sebenarnya tidak dirancang untuk melakukan ekspansi yang Anda inginkan, sedangkan solusi menggunakan tabel sepele. Argumen umumnya dibuat bahwa mengambang lebih tepat untuk tata letak, bukan tabel .. tetapi Anda tidak menggunakan mengambang di sini, Anda berpura-pura - dan semacam itu mengalahkan tujuan dari argumen gaya untuk kasus khusus ini, di pendapat saya yang sederhana.


Jangan gunakan tabel untuk tata letak. Anda tidak dapat mengatur ketinggiannya. Mereka memperluas untuk menyimpan konten mereka, dan mereka tidak menghormati luapan.
kbro

@ kbro: Jangan gunakan tabel untuk tata letak karena konten dan tampilan harus disimpan terpisah. Tetapi jika konten terstruktur sebagai sebuah tabel, tentu dapat dipotong dengan overflow: hidden. jsfiddle.net/dave2/a5jbpc85
Dave

3

Saya mencoba solusi di atas untuk cairan kiri, dan hak tetap tetapi tidak ada yang bekerja (saya tahu pertanyaannya adalah sebaliknya tetapi saya pikir ini relevan). Inilah yang berhasil:

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>

3

Saya punya masalah serupa dan saya menemukan solusinya di sini: https://stackoverflow.com/a/16909141/3934886

Solusinya adalah untuk div pusat tetap dan kolom sisi cair.

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

Jika Anda menginginkan kolom kiri yang diperbaiki, cukup ubah rumusnya.


Tidak tersedia di beberapa peramban lama seperti IE8 dan hanya sebagian di IE9 ( caniuse.com/#feat=calc )
landi

2

Anda dapat menggunakan properti Grid CSS, adalah struktur cara yang paling jelas, bersih dan intuitif kotak Anda.

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}
<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>


1

Saya ingin tahu bahwa tidak ada yang terbiasa position: absolutedenganposition: relative

Jadi, solusi lain adalah:

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

Contoh jsfiddle


0

/ * * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/ * * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

0

Saya punya solusi yang sangat sederhana untuk ini! // HTML

<div>
<div id="left">
    left
</div>
<div id="right">
    right
</div>

// CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

Tautan: http://jsfiddle.net/MHeqG/


0

Saya memiliki masalah yang sama dan muncul dengan yang berikut ini yang bekerja dengan baik

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

Metode ini tidak akan membungkus ketika jendela menyusut tetapi akan secara otomatis memperluas area 'konten'. Ini akan menjaga lebar statis untuk menu situs (kiri).

Dan untuk demo kotak konten yang diperluas secara otomatis dan kotak vertikal kiri (menu situs):

https://jsfiddle.net/tidan/332a6qte/


0

Coba tambahkan posisi relative, hapus widthdan floatproperti di sisi kanan, lalu tambah leftdan rightproperti dengan 0nilai.

Anda juga dapat menambahkan margin leftaturan dengan nilai didasarkan pada lebar elemen kiri (+ beberapa piksel jika Anda memerlukan ruang di antaranya) untuk mempertahankan posisinya.

Contoh ini berfungsi untuk saya:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

0

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}
<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

Coba ini. Ini berhasil untuk saya.


0

Saya telah mengerjakan masalah ini selama dua hari dan memiliki solusi yang dapat bekerja untuk Anda dan siapa pun yang mencoba membuat lebar Tetap responsif ke kiri dan sisi kanan mengisi sisa layar tanpa membungkus sisi kiri. Tujuan yang saya asumsikan adalah membuat halaman responsif di browser maupun perangkat seluler.

Ini Kodenya

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}
/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>

Ini biola saya yang mungkin bekerja untuk Anda seperti yang terjadi pada saya. https://jsfiddle.net/Larry_Robertson/62LLjapm/


0

Aturan untuk barang dan wadah;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

Gunakan ruang putih: nowrap; untuk teks dalam item terakhir untuk restrukturisasi mereka.

Item X% | Butir Y% | Barang Z%

Total panjang selalu = 100%!

jika

Item X=50%
Item Y=10%
Item z=20%

kemudian

Item X = 70%

Item X dominan (item pertama dominan dalam tata letak CSS tabel)!

Coba maks-konten; properti untuk div di dalam untuk menyebarkan div dalam wadah:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}


0

Solusi termudah adalah menggunakan margin. Ini juga akan responsif!

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>

0

Solusi paling sederhana adalah dengan membuat lebar div kiri sama dengan 100% - lebar div kanan ditambah margin di antara mereka.

<div class="cont">
  <div class="search">
    Big Logo Text
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="#1">NavLink1</a></li>
      <li><a href="#2">NavLink2</a></li>
      <li><a href="#3">NavLink3</a></li>
      <li><a href="#4">NavLink4</a></li>
      <li><a href="#5">NavLink5</a></li>
    </ul>
  </nav>
</div>

.cont{
  display: inline-grid;
  grid-template-columns: 160px 10px calc(100% - 170px);
  grid-template-rows: auto;
  grid-template-areas: "search .  navigation";
  width: 100%;
  height: auto;
  text-align: center;
}

.search {
  grid-area: search;
  height: 90px;
  background-color: #00FF00;
  line-height: 80px;
  font-size: 1.4rem;
  font-weight: 600;
}
nav {
  grid-area: navigation;
  height: 90px;
  background-color: #A53030;
}

.navbar{
  display: flex;
  height: 30px;
  width: 100%;
  padding: 0%;
  list-style-type: none;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

.navbar a{
    outline: 0;
    text-decoration: none;
}

https://codepen.io/tamjk/pen/dybqKBN


-2

Saya mengalami masalah yang sama mencoba tata letak beberapa kontrol jqueryUI . Meskipun filosofi umum sekarang adalah "menggunakan DIVbukan TABLE", saya menemukan dalam kasus saya menggunakan TABEL bekerja lebih baik. Khususnya, jika Anda perlu memiliki penyelarasan langsung dalam dua elemen (misalnya, pemusatan vertikal, pemusatan horizontal, dll.) Opsi yang tersedia dengan TABEL memberikan kontrol intuitif yang sederhana untuk ini.

Inilah solusi saya:

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>

9
Anda seharusnya tidak pernah menggunakan tabel untuk memformat apa pun selain data tabular. PERNAH.
mmmeff

1
Masalah dengan tabel adalah bahwa markup akan menyesatkan jika apa yang Anda coba tampilkan tidak dimaksudkan untuk menjadi data tabular. Jika Anda memilih untuk mengabaikan prinsip markup membawa makna, Anda juga bisa kembali ke<font> , <b>, dll HTML berevolusi masa lalu yang kurang fokus pada presentasi.
Vilinkameni

4
Tidak tahu mengapa semua orang panik tentang tabel. Terkadang mereka berguna.
Jandieg

Anda tidak bisa memperbaiki ketinggian meja. Jika konten bertambah besar, begitu pula tabelnya. Dan itu tidak menghormati overflow.
kbro

@Jandieg: lihat jawaban Mihai Frentiu untuk penjelasan. Seluruh tujuan CSS adalah untuk memisahkan konten dari tampilan. Menggunakan properti seperti display:tableuntuk mencapai tampilan data non-tabular yang diinginkan bersih. Memaksa data non-tabular seperti kolom halaman atau kontrol formulir ke dalam tabel HTML untuk mengontrol tata letak tidak jelas.
Dave
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.