Wie positioniere ich mein Layout, um meine Seite neben meiner Sektion zu haben?

Question

Unter meiner Navigationsleiste möchte ich eine Seite links und eine Seite rechts neben der Seite. Meine Seite und Abschnitt sollte auf der gleichen Linie nicht überlappend sein. Mein Abschnitt befindet sich gerade unterhalb meiner Seite auf einer neuen Zeile. Wie kann ich dieses Problem beheben?

header { 
 
\t color:black; 
 
\t text-align:center; 
 
\t padding:5px; 
 
\t display:block; 
 
} 
 

 
#wrapper { 
 
\t width: 700px; 
 
\t margin: 0 auto; 
 

 
} 
 

 
#nav { 
 
\t width:500px; 
 
\t margin: 0 auto; 
 
\t list-style-type: none; 
 
\t white-space: nowrap; 
 
\t display:block; 
 
} 
 

 
#nav { 
 
    padding: 10px 0; 
 
    width:500px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    list-style-type: none; 
 
    display:block; 
 
    -webkit-box-shadow: 0 2px 10px -12px #999; 
 
    -moz-box-shadow: 0 8px 6px -6px #999; 
 
    box-shadow: 0 8px 6px -6px #999; 
 
} 
 

 
#nav li { 
 
    display: inline-block; 
 
} 
 

 
#nav a { 
 
\t text-align:center; 
 
\t text-decoration:none; 
 
\t padding: 5px; 
 
} 
 

 
aside { 
 
\t padding:5px; 
 
\t height:200px; 
 
\t width:100px; 
 
\t display:block; 
 
} 
 

 
section { 
 
\t float:left; 
 
\t width:200px; 
 
\t padding:5px; 
 
\t display:inline-block; 
 
}

<header>Portfolio</header> 
 

 

 
<ul id="nav"> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Writing</a></li> 
 
    <li><a href="#">Multimedia</a></li> 
 
    <li><a href="#">Resume</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
</ul> 
 

 
<aside> 
 
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfs 
 
sdfsdfsdfsdfsdfsdfsdf 
 
sdfsdfsdfsdfsdfsdfsdfsdfs 
 
sdfsdfsdfsdfsdfsdfsdfsdf 
 
sdf 
 
</aside> 
 

 
<section> 
 
sdfsdfsdfsdfsdfsdfsdsdfsdfsdfsdfsdfsdfsd 
 
</section>

Answer 1

Sie benötigen word-wrap. Dann könnten Sie:

1. Verwenden display: block und float:left. https://jsfiddle.net/abalter/5cyp6tjh/

2. Verwenden Sie display: inline-block und vertical-align: top. https://jsfiddle.net/abalter/cdsjsvL3/

EDIT Wenn Sie sie zentrieren möchten, wäre die beste Art und Weise eher einen Wrapper zu verwenden als bei Breiten frisieren. Das bringt Sie in Schwierigkeiten, wenn Sie versuchen, reaktionsfähig zu sein (mobil).

https://jsfiddle.net/abalter/2a86ac1t/

HTML:

<div id="wrapper"> 
    <aside> 
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfs 
    sdfsdfsdfsdfsdfsdfsdf 
    sdfsdfsdfsdfsdfsdfsdfsdfs 
    sdfsdfsdfsdfsdfsdfsdfsdf 
    sdf 
    </aside> 

    <section> 
    sdfsdfsdfsdfsdfsdfsdsdfsdfsdfsdfsdfsdfsd 
    </section> 

</div> 

CSS:

aside, section { 
    display:inline-block; 
    vertical-align: top; 
    border: 1px dotted blue; 
    word-wrap: break-word; 
} 

#wrapper { 
    text-align: center; 
} 

Answer 2

float:right; in CSS für <aside> Tag hinzufügen.

ODER

können Sie <aside> unten an section bewegen und float:left; in CSS hinzufügen.

aside { 
padding:5px; 
height:200px; 
width:100px; 
float:right; 
} 

Und

Verwenden word-break: break-all; für aside und section zu verhindern überlappen.

Answer 3

Problem ist hier, dass Sie display:block beiseite gelegt haben. Um es zu beheben, verwenden Sie float:left oder display:inline-block anstelle von display:block. so

aside { 
    padding:5px; 
    height:200px; 
    word-break: break-word; 
    float:left; 
} 

Um Überlappung zu entfernen. verwenden word-break: break-word;

Answer 4

Sie haben die display:block von der Seite und ändern Sie die Breite auf 300 Pixel, da das Schwimmerelement zu entfernen sind 200px so dann 300px so muss es dann richtig formatiert und das Überlappungsproblem

oder

überwinden

können Sie die Breite zu auto: width:auto beiseite { padding: 5px; Rand rechts: 30px; Höhe: 200px; Breite: 300px; Schwimmer: links; }