Positionieren eines Elements neben einem nicht benachbarten Element mit nur CSS?

<header> 
 
    <div> 
 
    <h1>Title</h1> 
 
    </div> 
 
    <div id="nav"> 
 
    <nav> 
 
     <ul> 
 
     <li>foo</li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 
<div id="main"> 
 
    content! 
 
</div>

ich die folgende Seitenlayout haben, wo der Titel div über den oberen Rand des Fensters macht, dann macht div#nav darunter, und div#main macht unter es:

<body> 
    <header> 
     <div> 
      <h1>Title</h1> 
     </div> 
     <div id="nav"> 
      <nav> 
       <ul> 
        <li>foo</li> 
       </ul> 
      </nav> 
     </div> 
    </header> 
    <div id="main"> 
     content! 
    </div> 
</body>

Ist es möglich, mit nur CSS und ohne das DOM zu ändern, um die div#nav (oder seine Kind-Navigationselement) zu positionieren auf der rechten Seite von div#main?

Quelle

2016-06-27 SQLisNotMyFriend

Ja, Sie können es so machen, https://jsfiddle.net/Lddyn573/1/

header > div{width: 100%; background-color: lightblue} 
header > #nav{float: right; width: 50%; background-color: lightgreen} 
#main{float: right; width: 50%; background-color: lightpink}

Quelle

2016-06-27 16:12:39

Sie es mit position:absolute
Scheck tun können, um dieses jsfiddle

Code:

header { 
    position:relative; 
    float:left; 
    width:100%; 
    background:blue; 
} 
#nav { 
    position: absolute; 
    right: 0; 
    background: yellow; 
    top: 100%; 
    width: 50%; 
} 
#main { 
    background: red; 
    float: left; 
    width: 50%; 
}

Quelle

2016-06-27 16:15:56

Positionieren eines Elements neben einem nicht benachbarten Element mit nur CSS?

Antwort

Verwandte Themen