Wie löst man dieses Problem in Bezug auf die Ausrichtung von divs nebeneinander?

Mögliche Duplizieren:
Aligning divs next to each other?Wie löst man dieses Problem in Bezug auf die Ausrichtung von divs nebeneinander?

Ich möchte dieses Design:

DIV1: auto-size DIV2: 160px 
divnumberonediv divtwo 
divnumberonediv divtwo 
divnumberonediv divtwo 
divnumberonediv divtwo 
divnumberonediv divtwo 
divnumberonediv divtwo

Wie löse ich dieses Problem? Ich habe Sachen wie floating links & richtig versucht, aber ich kann sie einfach nicht auf der gleichen Linie bekommen.

Ich möchte das div 2 immer da sein, und das div1, um eine maximale Breite von 40em zu haben, aber die Größe ändern, damit das div 2 zu allen Zeiten zeigen kann, wenn es notwendig ist.

Mein CSS-Code:

#mainbulk { 
padding: 1.5em 2% 1.5em .5em; 
} 
#ads { 
width: 7.5em; 
float: left; 
display: table-cell; 
padding: 0 0 0 2em; 
} 
#textcontent { 
width: 70%; 
float: left; 
display: table-cell; 
}

und HTML

<div id="mainbulk"> 
<div id="textcontent"> 
    <p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p> 
    </div> 
    <div id="ads" align="right"> 
    ads would, hypothetically, be placed here if this were actually an actual website. 
    </div> 
</div>

ich dieses Problem bin Begegnung:

http://www.screencast-o-matic.com/watch/c6lrXsXyQ

vollständiger Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Frotly</title> 
<style type="text/css"> 
body, html { 
    font-size: 100%; 
    text-align: center; 
    padding: 0; 
    border: 0; 
    margin: 0; 
} 

#intro { 
    border: 0; 
    text-align: inherit; 
    width: inherit; 
} 

#content { 
    max-width: 50em; 
    margin: 0 0 0 .7em; 
} 
#header { 
    background-image: url(images/frotly.gif); 
    background-repeat: no-repeat; 
    height: 6.25em; 
} 
#menu { 
    text-align: left; 
} 
#mainbulk { 
    text-align: left; 
} 
#menu a { 
    height: 1em; 
    text-transform: uppercase; 
    padding: 0.15em .6em; 
    font-size: 0.9em; 
    margin: 0 .5em; 
    border-color: #000; 
    border-radius: 4px; 
    -moz-border-radius: 4px; /*Mozilla*/ 
    color: #FFF; 
    font-weight: bold; 
    text-decoration: none; 

} 
#menu a:link{ 
    border: px solid black; 
    background: url(images/menubg2.gif) repeat-x; 
} 
#menu a:hover { 
    background: url(images/menubginv.gif) repeat-x; 
} 
#mainbulk { 
    padding: 1.5em 2% 1.5em .5em; 
} 
#ads { 
    width: 7.5em; 
    float: left; 
    display: table-cell; 
    padding: 0 0 0 2em; 
} 
#textcontent { 
    width: 70%; 
    float: left; 
    display: table-cell; 
} 
</style> 
</head> 

<body> 
<div id="content"> 
<div id="intro"> 
    <div id="header"> 

    </div> 
    <div id="menu"> 
     <a href="#">Page 2</a><a href="#">Page 3</a><a href="#">Page 4</a><a href="#">Page 5</a><a href="#">Page 6</a> 
    </div> 
</div> 
<div id="mainbulk"> 
    <div id="textcontent"> 
     <p>Frotly is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that Frotly can't do, then nothing can do it, but I'd suggest to try all of Frotly's features before complaining.</p> 
    </div> 
    <div id="ads"> 
    sdjafjhdj fg dfg sdf sadf asdf asdf asdf asdf asdfa sd hgilehri hergiuesrh iofdshoiers f vpaeirg 9owaej waeoioje raoaednae dnirefn oeh råo hwog heirhg oesnr ieharg eanr poaergo neriuhg neiarginea rer gr. 
    </div> 
</div> 
</div> 
</body> 
</html>

Quelle

2010-12-21 DarkLightA

bitte Ihre ursprüngliche Frage verfeinern weitere Informationen zur Verfügung zu stellen, oder das Problem weiter zu klären. Idealerweise erklären, warum die aktuellen Antworten nicht zufriedenstellend sind. Das Posten neuer Fragen hat (mindestens) zwei Nebeneffekte: erstens fügt es dem System einfach weiteres Rauschen hinzu; und zweitens, und viel wichtiger, irritiert es die Leute so sehr, dass sie fast sofort dafür stimmen, als exaktes Duplikat zu schließen. –

@David Thomas --- alles wird im begleitenden Video erklärt. http://www.screencast-o-matic.com/watch/c6lrXsXyQ Ich fügte das zu der anderen Frage hinzu, nachdem Leute aufhörten, es zu besuchen. – DarkLightA

Sie können den Titel Ihrer Frage bearbeiten und einen Kommentar hinzufügen, damit die Personen wissen, dass sie aktualisiert wurde. Schreiben Sie keine Fragen neu, da die Leute sie einfach schließen, anstatt sie zu beantworten. – Kyle

#mainbulk { width: 960px; }

die Breite des Hauptbehälters einzustellen oder verwendet min-width

Quelle

2010-12-21 12:12:09 ITg

Es ist bereits da, ich habe nur ein bisschen von der Seite der Frage hinzugefügt. Ich mag auch keine px, bevorzuge em. – DarkLightA

Ich denke es ist, weil Sie maximale Breite verwenden, versuchen Sie auch eine minimale Breite hinzuzufügen – ITg

Wie löst man dieses Problem in Bezug auf die Ausrichtung von divs nebeneinander?

Antwort

Verwandte Themen