Herzlich Willkommen, lieber Gast!
  Sie befinden sich hier:

  Forum » HTML / XML / XHTML » 3 div nebeneinander

Forum | Hilfe | Team | Links | Impressum | > Suche < | Mitglieder | Registrieren | Einloggen
  Quicklinks: MSDN-Online || STL || clib Reference Grundlagen || Literatur || E-Books || Zubehör || > F.A.Q. < || Downloads   

Autor Thread - Seiten: > 1 <
000
15.07.2011, 02:21 Uhr
Pablo
Supertux
(Operator)


Hallo

ich will folgendes layout


Code:

+--------------------+
| div 1 | div 2 | div 3 |
+--------------------+



wobei die Größe (in pixel) nur von div2 bekannt ist. Ich würde gerne, dass div 1 und div 3 die selbe Größen haben und dass alles zentriert ist. Wie kann ich das mit CSS erreichen? Ich hab schon einiges probiert, komme nicht mal annährend an mein Ziel
--
A! Elbereth Gilthoniel!
silivren penna míriel
o menel aglar elenath,
Gilthoniel, A! Elbereth!
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
001
15.07.2011, 09:04 Uhr
FloSoft
Medialer Over-Flow
(Administrator)


meinst du sowas?

www.css4you.de/wslayout1/ex0010.html

Das Problem ist, das du entweder alle 3 spalten mit prozentangaben festlegen musst, oder mit festen werten, sonst bekommt man das nie so hin wie man das möchte.
--
class God : public ChuckNorris { };
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
002
16.07.2011, 01:26 Uhr
0xdeadbeef
Gott
(Operator)



Code:
<html>
  <head>
    <style type="text/css">
      div { border: 1px solid gray; }

      #container {
        display: table;
        width:   100%;
      }

      .aussen {
        display: table-cell;
        width:   auto;
      }

      .mitte {
        display: table-cell;
        width:   200px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="aussen">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
        do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.
      </div>
      <div class="mitte" >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
        do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.
      </div>
      <div class="aussen">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
        do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.
      </div>
    </div>
  </body>
</html>


--
Einfachheit ist Voraussetzung für Zuverlässigkeit.
-- Edsger Wybe Dijkstra

Dieser Post wurde am 16.07.2011 um 01:35 Uhr von 0xdeadbeef editiert.
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
003
16.07.2011, 16:58 Uhr
Pablo
Supertux
(Operator)


danke!

ich wusste gar nicht, dass 'auto' auch bei width funktioniert. Und was macht display: table-cell; ?
--
A! Elbereth Gilthoniel!
silivren penna míriel
o menel aglar elenath,
Gilthoniel, A! Elbereth!
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
004
16.07.2011, 21:52 Uhr
0xdeadbeef
Gott
(Operator)


Es kann sogar sein, dass auto da default ist. Wie dem auch sei, die divs sind hier in einem Tabellenlayout angelegt. Der Container ist mit display:table der Rahmen dafür, die divs in ihm mit display:table-cell nebeneinander als Zellen angeordnet. Man könnte sie in Elementen mit display:table-row zusammenfassen, aber da es hier nur eine Zeile gibt, ist das unnötig.
--
Einfachheit ist Voraussetzung für Zuverlässigkeit.
-- Edsger Wybe Dijkstra
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
Seiten: > 1 <     [ HTML / XML / XHTML ]  


ThWBoard 2.73 FloSoft-Edition
© by Paul Baecher & Felix Gonschorek (www.thwboard.de)

Anpassungen des Forums
© by Flo-Soft (www.flo-soft.de)

Sie sind Besucher: