nie można ustawić szerokości piksela div za pomocą CSS szerokość attibute

Próbuję utworzyć div, który zawiera 4 DIV. Chcę ustawić szerokość kontenera i niektórych zawartych elementów div w celu ustawienia wartości, ale wydaje się, że przyjmują szerokość zawartości.nie można ustawić szerokości piksela div za pomocą CSS szerokość attibute

<html> 
<head> 
    <style> 
div { 
    border: 1px solid #888; 
} 

.container { 
    width: 300px; 
    position: relative; 
} 

.container div { 
    display: inline; 
    } 

.div1 { 
    width: 20px; 
    overflow: hidden; 
} 
.div2 { 
    width: 80px; 
    overflow: hidden; 
} 
.div3 { 
    width: 160px; 
    overflow: hidden; 
} 
.div4 { 
    width: 20px; 
    overflow: hidden; 
    position: absolute; 
    top:0px; 
    right: 0px; 
} 
    </style> 
</head> 
<body> 

<div class="container"> 
    <div class="div1"><img src="1x1.gif" width="1" height="1"/></div> 
    <div class="div2"><span>date</span></div> 
    <div class="div3"><span>text</span></div> 
    <div class="div4"><span>twistie</span></div>  
</div>  
</body> 
</html>

Wynik wygląda tak:

+--+----+----+------------------------+---+ 
| |date|text|      |twi| 
+--+----+----+------------------------+---+

Może ktoś wyjaśnić, dlaczego div z lewej strony nie są ustawione do wymaganych szerokościach?

Źródło

2010-11-02 paul

Czy mają one być nagłówkami kolumn? Wygląda na to, że stół może być bardziej odpowiedni. – meagar

Nie nagłówki kolumn. Nie używaj tabeli, ponieważ style * mogą * zmieniać się znacząco ... – paul

myślę, że to z powodu display: inline styl spróbuj tego:

<div style='width:100px;overflow:hidden;'> 
<div style='float:left;width:20px'></div> 
<div style='float:left;width:20px'></div> 
<div style='float:left;width:20px'></div> 
<div style='clear:both;'></div> 
</div>

Źródło

2010-11-02 13:56:11 heximal

+1 To chyba załatwiło sprawę! Wyjaśnienie ktoś ;-) – paul

Elementy śródliniowe nie używają żadnej określonej przez ciebie szerokości ani wysokości. –

.container { 
    float: left; 
    width: 300px; 
    position: relative; 
} 

.container div { 
    float: left; 
}

powinno załatwić sprawę. Usuń wbudowany wyświetlacz na wewnętrznych elementach div i przenieś wszystkie elementy div w lewo. Następnie możesz określić szerokości elementów div i ewentualne marginesy między nimi.

Źródło

2010-11-02 13:58:10

Zmień CSS następująco

.container div { 
    display: inline-block; 
    }

Po ustawieniu div kontenera do inline, aktywnie ustawić wszystkie swoje dzieci do inline, a także, być może również właśnie zostały przy użyciu <span> s.

Oto przykład, aby zobaczyć. bo ustawiasz display:inline; jest

http://jsfiddle.net/Kyle_Sevenoaks/ZwKDb/

Źródło

2010-11-02 14:00:05 Kyle

Powodem nie można ustawić szerokości.

Gdy elementy są wyświetlane w treści, nie mogą mieć ich wymiary podano ponieważ wielkość elementu zależy od długości tekstu w jego obrębie.

Domyślnie <div> znaczniki są ustawione na display:block;. Ten tryb może mieć określoną wysokość i szerokość, ale domyślnie jest wyświetlana pod poprzednim blokiem.

Istnieją dwa sposoby obejścia tego dla Ciebie:

Zastosowanie display:block; i float:left; - Spowoduje to zmianę bloki na elementach pływających, co oznacza, że kolejne elementy będą owinąć wokół nich. W połączeniu z innymi blokami pozwala to na ustawienie ich w linii. Jednak użycie float może mieć inne nieoczekiwane efekty uboczne, ze względu na efekt owijający, który opisałem.
Zastosowanie display:inline-block; - To jest mój preferowanym rozwiązaniem na to pytanie. inline-block jest tryb dom w połowie drogi między block i inline. Pozwala to na traktowanie elementu jako wbudowanego w celu przepływu dokumentów, ale zachowują się jak blok wewnątrz, ponieważ zawsze będzie on prostokątny i będziesz w stanie określić wysokość i szerokość itd. Ma on kilka dziwactw (przede wszystkim słabe wsparcie w IE6), ale ogólnie rzecz biorąc to, co próbujesz osiągnąć, jest to znacznie czystsze rozwiązanie i nie ma dziwnych efektów ubocznych od float.

Nadzieję, że pomaga.

Źródło

2010-11-02 14:23:27 Spudley

nie można ustawić szerokości piksela div za pomocą CSS szerokość attibute

Odpowiedz

Powiązane problemy