web-gelistirme-sc.com

Sayfayı dikey olarak CSS kullanarak bölme

Gerçekten basit bir soru için üzgünüm ama bu satırlar boyunca önceden tanımlanmış genişliklerde bir div sola ve bir sağa doğru yüzmeye çalıştım

<div style="width: 100%;">
    <div style="float:left; width: 80%">
    </div>
    <div style="float:right;">
    </div>
</div>

Bu 'çoğunlukla' işe yaramasına rağmen, altındaki sayfadaki diğer unsurları bozmuş gibi görünüyor.

Peki, bir HTML sayfasını, sayfadaki diğer öğeleri etkilemeden CSS kullanarak dikey olarak iki bölüme ayırmanın nedeni nedir?

33

kullanabilirsiniz..

<div style="width: 100%;">
   <div style="float:left; width: 80%">
   </div>
   <div style="float:right;">
   </div>
</div>
<div style="clear:both"></div>

şimdi bunun altındaki eleman etkilenmeyecek.

42
Ashwini Agarwal

Sadece taşma ekleyin: otomatik; ebeveyni div

<div style="width: 100%;overflow:auto;">
    <div style="float:left; width: 80%">
    </div>
    <div style="float:right;">
    </div>
</div>

Çalışma Demosu

9
bugwheels94

Sayfadaki öğelerin dağıldığını tahmin ediyorum çünkü yüzerlerini temizlemiyorsun, şuna bir bak

Demo

HTML

<div class="wrap">
    <div class="floatleft"></div>
    <div class="floatright"></div>
    <div style="clear: both;"></div>
</div>

CSS

.wrap {
    width: 100%;
}

.floatleft {
    float:left; 
    width: 80%;
    background-color: #ff0000;
    height: 400px;
}

.floatright {
float: right;
    background-color: #00ff00;
    height: 400px;
    width: 20%;
}
7
Mr. Alien

Bu keman göz atın:

http://jsfiddle.net/G6N5T/1574/

CSS/HTML kodu:

.wrap {
    width: 100%;
    overflow:auto;
}

.fleft {
    float:left; 
    width: 33%;
background:lightblue;
    height: 400px;
}

.fcenter{
    float:left;
    width: 33%;
    background:lightgreen;
    height:400px;
    margin-left:0.25%;
}

.fright {
float: right;
    background:pink;
    height: 400px;
    width: 33.5%;
    
}
<div class="wrap">
    <!--Updated on 10/8/2016; fixed center alignment percentage-->
    <div class="fleft">Left</div>
    <div class="fcenter">Center</div>
    <div class="fright">Right</div>
</div>

Bu, sayfadaki floats öğesinin sol, sağ ve merkez hizalamaları için CSS div özelliğini kullanır.

3
Stardust

float ila left 'a sahip olarak da bir çözüm olabilir. 

Bunu dene: 

Çalışma Demosu

Not; Bu sadece Ankit'in Cevabının bir gelişimi.

3
Ankur

Alternatif olarak, tarayıcı ekranını iki eşit yarıya ayırmak için linear-gradient () function olarak bilinen özel bir işlevi de kullanabilirsiniz. .. Aşağıdaki kod parçasını inceleyin:

body
{
  background-image:linear-gradient(90deg, lightblue 50%, skyblue 50%);
}

Burada, linear-gradient () function üç argümanı kabul eder.

  1. / ekranın dikey bölümü için 90deg. (Benzer şekilde, ekranın yatay bölümü için 180deg kullanabilirsiniz)
  2. lightblue color, ekranın sol yarısını temsil etmek için kullanılır.
  3. Bölünmüş ekranın sağ yarısını temsil etmek için skyblue color kullanılmıştır .. __, Burada, tarayıcı ekranının eşit bölümü için 50% kullanılmıştır. Ekranın bir eşit bölünmesini istemiyorsanız, başka bir değer kullanabilirsiniz. :) Mutlu Kodlama!
0
Raunak Mitra