Vraag Hoe twee divs zij aan zij uit te lijnen met behulp van de float-, clear- en overflow-elementen met een vaste positie div /


Dus ik heb geprobeerd twee divs zij aan zij uit te lijnen zonder elkaar te overlappen. Ik heb één div die als sidebar zal worden vastgesteld en de juiste div als de inhoud. Hopelijk kan iemand me helpen.

body {
  background-color: #444;
  margin-top: 0;
  margin-bottom: 0;
}

#wrapper {
  width: 1005px;
  margin: 0 auto;
  padding: 0;
  overflow: auto;
}

#leftcolumn {
  width: 250px;
  background-color: #111;
  padding: 0;
  margin: 0;
  display: block;
  border: 1px solid white;
  position: fixed;
}

#rightcolumn {
  width: 750px;
  background-color: #777;
  display: block;
  float: left;
  border: 1px solid white;
}
<div id="wrapper">
  <div id="leftcolumn">
  </div>
  <div id="rightcolumn">
  </div>
</div>


33
2017-08-20 21:02


oorsprong


antwoorden:


Dit antwoord moet mogelijk worden aangepast afhankelijk van waarmee u probeerde te bereiken position: fixed;. Als je alleen twee kolommen naast elkaar wilt hebben, doe je gewoon het volgende:

http://jsfiddle.net/8weSA/1/

Ik zweefde gewoon beide kolommen naar links. ik voegde toe min-height aan elke kolom voor illustratieve doeleinden en ik vereenvoudigde uw CSS.

body {
  background-color: #444;
  margin: 0;
}

#wrapper {
  width: 1005px;
  margin: 0 auto;
}

#leftcolumn,
#rightcolumn {
  border: 1px solid white;
  float: left;
  min-height: 450px;
  color: white;
}

#leftcolumn {
  width: 250px;
  background-color: #111;
}

#rightcolumn {
  width: 750px;
  background-color: #777;
}
<div id="wrapper">
  <div id="leftcolumn">
    Left
  </div>
  <div id="rightcolumn">
    Right
  </div>
</div>

Als u wilt dat de linkerkolom op zijn plaats blijft terwijl u scrolt, doet u het volgende:

http://jsfiddle.net/8weSA/2/

Hier zweven we de rechter kolom naar rechts tijdens het toevoegen position: relative; naar #wrapper en position: fixed; naar #leftcolumn. Ik heb het opnieuw gebruikt min-height voor illustratieve doeleinden en kan voor uw behoeften worden verwijderd.

body {
  background-color: #444;
  margin: 0;
}

#wrapper {
  width: 1005px;
  margin: 0 auto;
  position: relative;
}

#leftcolumn,
#rightcolumn {
  border: 1px solid white;
  min-height: 750px;
  color: white;
}

#leftcolumn {
  width: 250px;
  background-color: #111;
  min-height: 100px;
  position: fixed;
}

#rightcolumn {
  width: 750px;
  background-color: #777;
  float: right;
}
<div id="wrapper">
  <div id="leftcolumn">
    Left
  </div>
  <div id="rightcolumn">
    Right
  </div>
</div>


43
2017-08-20 21:18



Probeer dit:

<div id="wrapper">
    <div class="float left">left</div>
    <div class="float right">right</div>
</div>

#wrapper {
   width:500px; 
   height:300px; 
   position:relative;
}

.float {
   background-color:black; 
   height:300px; 
   margin:0; 
   padding:0; 
   color:white;
}

.left {
   background-color:blue; 
   position:fixed; 
   width:400px;
}

.right {
   float:right; 
   width:100px;
}

jsFiddle: http://jsfiddle.net/khA4m


6
2017-08-20 21:15



Ik heb dit gedaan:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>AutoDealer</title>
        <style>
        .container{
            width: 860px;
            height: 1074px;
            margin-right: auto;
            margin-left: auto;
            border: 1px solid red;

        }
        .nav{

        }
        .wrapper{
            display: block;
            overflow: hidden;
            border: 1px solid green;
        }
       .otherWrapper{
            display: block;
            overflow: hidden;
            border: 1px solid green;
            float:left;
        }
    .left{
        width: 399px;
        float: left;
        background-color: pink;
    }
            .bottom{
        clear: both;
        width: 399px;
        background-color: yellow;



    }
    .right{
        height:350px;
        width: 449px;
        overflow: hidden;
        background-color: blue;
        overflow: hidden;
        float:right;
    }

    </style>
</head>
<body>
    <div class="container">
        <div class="nav"></div>
        <div class="wrapper">
        <div class="otherWrapper">
            <div class="left">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies aliquet tellus sit amet ultrices. Sed faucibus, nunc vitae accumsan laoreet, enim metus varius nulla, ac ultricies felis ante venenatis justo. In hac habitasse platea dictumst. In cursus enim nec urna molestie, id mattis elit mollis. In sed eros eget nibh congue vehicula. Nunc vestibulum enim risus, sit amet suscipit dui auctor et. Morbi orci magna, accumsan at turpis a, scelerisque congue eros. Morbi non mi vel nibh varius blandit sed et urna.</p>
            </div>
             <div class="bottom">
                <p>ucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesq</p></div>
             </div>

             <div class="right">
                <p>Quisque vulputate mi id turpis luctus, quis laoreet nisi vestibulum. Morbi facilisis erat vitae augue ornare convallis. Fusce sit amet magna rutrum, hendrerit purus vitae, congue justo. Nam non mi eget purus ultricies lacinia. Fusce ante nisl, efficitur venenatis urna ut, pellentesque egestas nisl. In ut faucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesque maximus. Quisque a tempus lectus.</p>
             </div>
        </div>
    </div>
</body>

Dus eigenlijk heb ik net een andere div gemaakt om het roze en geel in te pakken en ik maak die div een float: er op. De blauwe div heeft een float: recht er op.


1
2018-06-09 04:19



Je code is correct. Markeer kleine correcties.

#rightcolumn {
     width: 750px;
     background-color: #777;
     display: block;
     **float: left;(wrong)**
     **float: right; (corrected)**
     border: 1px solid white;
}

0
2018-02-25 06:37