Aralıkları veya div'leri yatay olarak nasıl hizalarım?

Benim tek sorunum, onları üç çapraz sıraya dizmek ve eşit aralıklara sahip olmak. Görünüşe göre, aralıklar genişliğe ve divlere sahip olamazlar (ve display: block içeren aralıklar) birbirlerinin yanında yatay olarak görünmezler. Öneriler?

<div style='width:30%; text-align:center; float:left; clear:both;'> Şimdi sahip olduğum şey.

Div'leri, float: left;yatay olarak yan yana görünmelerini sağlayacak nitelikte kullanabilirsiniz , ancak daha sonra çakışmadıklarından emin olmak için aşağıdaki öğelerde temizleme kullanmanız gerekebilir.

Kullanabilirsiniz

.floatybox {
     display: inline-block;
     width: 123px;
}

Yalnızca satır içi engellemeleri destekleyen tarayıcıları desteklemeniz gerekiyorsa. Satır içi blokların genişliği olabilir, ancak düğme öğeleri gibi satırla hizalıdır.

Oh, ve belki de dikey hizalama eklemek isteyebilirsiniz: işlerin aynı hizada olduğundan emin olmak için öğelerin üstüne

Cevabım:

<style>
 #whatever div {
  display: inline;
  margin: 0 1em 0 1em;
  width: 30%;
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

Neden?

Teknik olarak, Span bir satır içi öğedir, ancak genişliğe sahip olabilir, sadece display özelliğini önce engelleyecek şekilde ayarlamanız gerekir. Bununla birlikte, bu bağlamda, bu div'leri içerikle doldurmak istediğinizi tahmin ettiğim için bir div muhtemelen daha uygundur.

Kesinlikle yapmak istemediğiniz bir şey clear:both, div'ları ayarlamaktır. Bu şekilde ayarlamak, tarayıcının herhangi bir öğenin kendileriyle aynı satıra oturmasına izin vermeyeceği anlamına gelir. Sonuç olarak, öğeleriniz birikir.

Dikkat edin display:inline,. Bu ie6 marj ikiye katlama hatası ile ilgilidir. Gerekirse, koşullu stil sayfaları gibi başka yollarla da bunun üstesinden gelebilirsiniz.

Sayfadaki tek unsurların bunlar olmayacağını tahmin ettiğim için bir sarmalayıcı (# her neyse) ekledim, bu yüzden neredeyse kesinlikle onları diğer sayfa öğelerinden ayırmanız gerekecek.

Her neyse, umarım yardımcı olur.

yapabilirsin:

<div style="float: left;"></div>

veya

<div style="display: inline;"></div>

Her ikisi de div'lerin yatay olarak döşenmesine neden olur.

Size 3 eşit boyutlu sütun, hatta aralık ve (eşit) ölçekler verdiği için böyle bir şey yapardım. Not: Bu test edilmemiştir, bu nedenle eski tarayıcılar için ince ayar yapılması gerekebilir.

<style>
html, body {
    margin: 0;
    padding: 0;
}

.content {
    float: left;
    width: 30%;
    border:none;
}

.rightcontent {
    float: right;
    width: 30%;
    border:none
}

.hspacer {
    width:5%;
    float:left;
}

.clear {
    clear:both;
}
</style>

<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>

Kullanmak istiyorum:

<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%; 
}
.sidebox { 
float: right;
width: 30%; 
}
<div class="all">
   <div class="maincontent">
       MainContent
   </div>
   <div class="sidebox"> 
       SideboxContent
   </div>
</div>

Bu 'kod aracını' ilk defa overflow'dan kullanıyorum ... ama şimdiye kadar yapmalıyım ...

Yapmak isteyebileceğiniz şey, CSS ızgarası tabanlı mizanpajlara bakmaktır. Bu düzen yöntemi, sayfa içeriklerini bir ızgara yapısına hizalamak için bazı CSS sınıflarının belirtilmesini içerir. Web tabanlı olmaktan ziyade basılı düzen ile daha yakından ilgilidir, ancak birçok web sitesinde içeriği tablolara başvurmak zorunda kalmadan bir yapıya yerleştirmek için kullanılan bir tekniktir.

Smashing Magazine'den yeni başlayanlar için bunu deneyin .

Css Float özelliğine bakın. http://w3schools.com/css/pr_class_float.asp

Div gibi blok elemanlarla çalışır. Alternatif olarak, neyi göstermeye çalışıyorsunuz, tablolar gerçekten bir bilgi tablosu göstermeye çalışıyorsanız kötü değildir.

Onlara tüm display: block;nitelik ve kullanımları vermeye çalışırdım float: left;.

Daha sonra widthve / veya heightistediğiniz gibi ayarlayabilirsiniz . Hatta bazı dikey hizalama kuralları da belirleyebilirsiniz.

    <!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>

başka ... kullanmayı deneyin float: left;veya diğer değerler için right;değiştirin width... işe yaramalı ... ayrıca div tarafından kullanılmayan% 10'unun aralarındaki ... kötü ingilizce için üzgünüm :)