İki bölme yan yana - Sıvı göstergesi

222

Yan yana iki div yerleştirmek ve bunun için aşağıdaki CSS kullanarak çalışıyorum.

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

#right {
  overflow: hidden;
}

HTML basittir, bir sarıcı div içinde iki sol ve sağ div.

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

StackOverflow ve diğer sitelerde de daha iyi bir yol aramak için birçok kez denedim, ama kesin yardımı bulamadım.

Yani, kod ilk bakışta iyi çalışıyor. Sorun, genişliği (%) olarak artırdığımda sol div otomatik olarak dolgu / kenar boşluğu alır olmasıdır. Yani,% 65 genişlikte, sol div bazı dolgu veya kenar boşluğuna sahip ve sağ div ile mükemmel bir şekilde hizalanmamış, 0 dolgu / marj 0 ama şanssız çalıştım. İkincisi, Sayfayı yakınlaştırırsam, sağ div sol div'in altına kayar, Sıvı gibi görünmez.

Not: Üzgünüm, çok aradım. Bu soru birçok kez soruldu ancak bu cevaplar bana yardımcı olmuyor. Benim durumumda sorunun ne olduğunu açıkladım.

Umarım bunun için bir düzeltme vardır.

Teşekkür ederim.

EDIT: Üzgünüm, bana HTML sorunu, Sol ve sağ tarafta iki "kutu" div vardı,% doldurma vardı, bu yüzden sol tarafında daha büyük genişliği nedeniyle daha dolgu gösterdi. Üzgünüz, yukarıdaki CSS mükemmel çalışıyor, sıvı ekranı ve sabit, Yanlış soru sorduğum için üzgünüm ...

— Waleed
kaynak

1

İki kutu div var mıydı? Kutu div nedir? Bu soru açık değil.

— john ktejik

252

Bunun yerine böyle bir sistem deneyin:

.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>

Snippet'i genişlet

Diğer div üzerinde ilk div'in genişliğine eşit kenar boşluğu kullanırsanız yalnızca bir div kaydırmanız gerekir. Bu, yakınlaştırma ne olursa olsun çalışır ve alt piksel sorunları yaşar.

— dezman
kaynak

1

Bu yardımcı olmuyor, yakınlaştırma şeyi şimdi düzeltildi, sabit diyor, ancak doğru div şimdi aşağı kaydırılıyor ve sabitleniyor

— Waleed

Muhtemelen bir şey berbat ettiniz, kodunuzu kontrol ettiniz veya bana jsFiddle bağlantısını söylüyorsunuz ve ona bakıyorum.

— dezman

ayy özür dilerim. Div'ler zaten verdiğim yukarıdaki CSS tarafından düzeltildi, hem sol hem de sağ taraftaki sadece "kutu" div'leri,% cinsinden dolgu ve marj vardı, çünkü sağ div bu yüzden kısa, bu enqual dolgu ve marjları vardı. Üzgünüm ...

— Waleed

Olmamalı <section>bir olmak <div>yerine?

— jvriesem

218

Bir flexbox ile bu kolaydır:

#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>

Snippet'i genişlet

— Christopher Moore
kaynak

5

Güzel, flexbox kesinlikle gitmenin yoludur

— Julian Soro

4

Bu siteye göre flex, tarayıcıların% 94'ünde çalışmalıdır. caniuse.com/#search=flex

— Adrian

8

@JoostS, mevcut farklı tarayıcıların% 94'ünün (her zaman krom, Mozilla, IE vb.

— Joe

6

Şu anda% 97 + seviyesinde. Temel olarak, IE8'i hedeflemeniz gerekmiyorsa, flexbox ile gidin, bu durumda ve diğerlerini söyleyebilirim. Flexbox çözümleri neredeyse her zaman daha zarif ve akıl yürütmesi daha kolaydır.

— Alan Thomas

6

Mevcut bir web siteniz varsa, asla tarayıcı paylaşımından geçmeyin, kendi trafik günlüklerinize bakın. Sitelerimin çoğunda IE8, trafiğin yalnızca% 0,01'ini oluşturuyor. Ancak ... kitlenin birçok eski yazılım kullanan şirketler, devlet kurumları veya kar amacı gütmeyen kuruluşlarda kullanıcı olduğu belirli siteler gördüm ve daha sonra eski IE tarayıcı kullanımı şaşırtıcı derecede yüksek olabilir.

— cazort

95

Mevcut sitem için bu CSS'yi kullanma. Mükemmel çalışıyor!

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

— Waleed
kaynak

49

Kendi cevabını bulduğunu ve kabul ettiğini duyduğuma sevindim, ama #sides nedir? Orijinal sorunuzda değil.

— JMD

2

Şamandıra kullanma: her iki çocukta da (#right) ana div (#wrapper) yüksekliğini öldürür. Dolayısıyla bu çözüm gereksinime bağlıdır. Sadece bir çocuğa şamandıra vermek daha iyi. (

— Rahul Gandhi

8

İşte Google çalışanlar için cevabım:

CSS:

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

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

İşte HTML:

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

— Malachi Bazar
kaynak

3

Her iki div'i de böyle yapın. Bu, her iki div'i yan yana hizalayacaktır.

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

— Coen Damen
kaynak

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!-->

Snippet'i genişlet

— CoolPerson879
kaynak

Taşma nedeni nedir: gizli? Gerekli görünmüyor ...

— 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 gerekli değildir.

— Towsif Ahmed Labib
kaynak