Dua divs berdampingan - Tampilan fluida

222

Saya mencoba untuk menempatkan dua divs berdampingan dan menggunakan CSS berikut untuk itu.

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

HTMLnya sederhana, dua div kiri dan kanan dalam wrapper div.

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

Saya telah mencoba berkali-kali untuk mencari cara yang lebih baik di StackOverflow dan situs lain juga, Tapi tidak dapat menemukan bantuan yang tepat.

Jadi, sekilas kode berfungsi dengan baik. Masalahnya adalah ini, bahwa div kiri mendapatkan padding / margin secara otomatis ketika saya menambah lebar dalam (%). Jadi, pada lebar 65%, div kiri memiliki beberapa padding atau margin dan tidak sepenuhnya selaras dengan div kanan, saya mencoba padding / margin 0 tetapi tidak berhasil. Kedua, Jika saya memperbesar halaman, div kanan slide di bawah div kiri, itu seperti tampilan tidak lancar.

Catatan: Saya minta maaf, saya telah banyak mencari. Pertanyaan ini telah ditanyakan berkali-kali tetapi jawaban itu tidak membantu saya. Saya telah menjelaskan apa masalahnya dalam kasus saya.

Saya harap ada perbaikan untuk itu.

Terima kasih.

EDIT: Maaf, saya masalah HTML, Ada dua div "kotak" di kedua sisi kiri dan kanan, Mereka memiliki bantalan dalam%, Jadi sisi kiri menunjukkan bantalan lebih karena lebar lebih besar. Maaf, CSS di atas berfungsi dengan sempurna, tampilannya lancar dan diperbaiki, Maaf karena mengajukan pertanyaan yang salah ...

css html fluid-layout fluid Waleed
sumber

1

Ada dua kotak divs? Apa itu kotak div? Pertanyaan ini tidak jelas.

john ktejik

252

Coba sistem seperti ini sebagai gantinya:

.container {
  width: 80%;
  height: 200px;
  background: aqua;
  margin: auto;
  padding: 10px;
}

.one {
  width: 15%;
  height: 200px;
  background: red;
  float: left;
}

.two {
  margin-left: 15%;
  height: 200px;
  background: black;
}

<section class="container">
  <div class="one"></div>
  <div class="two"></div>
</section>

Luaskan cuplikan

Anda hanya perlu melayang satu div jika Anda menggunakan margin-kiri di yang lain sama dengan lebar div pertama. Ini akan berfungsi apa pun zoom dan tidak akan memiliki masalah sub-piksel.

dezman
sumber

1

Ini tidak membantu, perbesaran diperbaiki sekarang, katanya tetap, tetapi div yang tepat sekarang meluncur ke bawah dan diperbaiki pada posisi itu

Waleed

Anda mungkin mengacaukan sesuatu, memeriksa kode Anda, atau memberi tahu saya tautan ke jsFiddle dan melihatnya buruk.

dezman

aww man, aku minta maaf. Div sudah diperbaiki oleh CSS saya di atas yang saya berikan, itu hanya div "kotak" di kedua sisi kiri dan kanan, memiliki padding dan margin dalam%, karena div kanan pendek itulah sebabnya, ia memiliki padding dan margin yang sama. Maaf ...

Waleed

Bukankah seharusnya <section>menjadi <div>?

jvriesem

218

Ini mudah dengan flexbox:

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

Luaskan cuplikan

Christopher Moore
sumber

5

Bagus, flexbox jelas merupakan cara yang harus dilakukan

Julian Soro

4

Menurut situs ini, flex seharusnya berfungsi pada 94% browser. caniuse.com/#search=flex

Adrian

8

@ JoostS bukankah 94% dari browser yang berbeda tersedia (seperti di dalamnya selalu berfungsi di chrome, Mozilla, IE dll dll), bukankah itu bekerja 94% dari waktu terlepas dari browser?

Joe

6

Saat ini berdiri di 97 +%. Pada dasarnya, saya akan mengatakan jika Anda tidak perlu menargetkan IE8, gunakan flexbox, dalam hal ini dan lainnya. Solusi Flexbox hampir selalu lebih elegan dan lebih mudah dipikirkan.

Alan Thomas

6

Jika Anda memiliki situs web yang sudah ada, jangan pernah menggunakan browser share, lihat log lalu lintas Anda sendiri. Di sebagian besar situs saya, IE8 hanya menyumbang sekitar 0,01% dari lalu lintas. Namun ... Saya telah melihat situs spesifik di mana audiensnya adalah pengguna di perusahaan, pemerintah, atau organisasi nirlaba yang menggunakan banyak perangkat lunak lama, dan kemudian penggunaan browser IE lama bisa sangat tinggi.

cazort

95

Menggunakan CSS ini untuk situs saya saat ini. Ini bekerja dengan sempurna!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}

Waleed
sumber

49

Senang mendengar Anda menemukan dan menerima jawaban Anda sendiri, tetapi apa itu #sisi? Itu tidak ada dalam pertanyaan awal Anda.

JMD

2

Menggunakan float: kiri pada kedua anak (# kanan) akan membunuh ketinggian div induk (#wrapper). Jadi solusi ini tergantung kebutuhan. Lebih baik memberi mengapung pada satu anak saja (# tersisa dalam kasus Anda)

Rahul Gandhi

8

Inilah jawaban saya untuk orang-orang yang menggunakan Google:

CSS:

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

Inilah HTML-nya:

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

Maleakhi Bazar
sumber

3

Buat kedua div seperti ini. Ini akan menyelaraskan kedua divs berdampingan.

.my-class {
  display : inline-flex;
}

Coen Damen
sumber

1

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}

<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->

Luaskan cuplikan

CoolPerson879
sumber

Apa alasan overflow: disembunyikan? Tampaknya tidak perlu ...

Honza

0

   <div style="height:50rem; width:100%; margin: auto;">
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left; background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
   </div>

margin-right tidak dibutuhkan.

Towsif Ahmed Labib
sumber

Dua divs berdampingan - Tampilan fluida

Jawaban: