Float: links; Alternative zum Erstellen von Divs in einer Zeile?

Question

Also arbeite ich gerade an einem Portfolio und ich kann Bootstrap nicht verwenden, weil es nicht mit der Website kompatibel ist (es verschraubt alles, ich könnte nur ein paar Verbesserungen machen, aber das ist nicht der Punkt), also versuche ich zu machen 3 divs in der gleichen Zeile ohne mit float: left; Wie soll ich dies ohne Bootstrap oder Tabellen tun?

 <div id="Portfolio"> 
      <div class="portfolioWrapper"> 

       <a class="portfolioLink" href="#"> 
       <div class="portfolioProject"> 
        <h4>Sample Project</h4> 
       </div> 
       </a> 

       <a class="portfolioLink" href="#"> 
       <div class="portfolioProject"> 
        <h4>Sample Project</h4> 
       </div> 
       </a> 

       <a class="portfolioLink" href="#"> 
       <div class="portfolioProject"> 
        <h4>Sample Project</h4> 
       </div> 
       </a> 

      </div> 
     </div> 

Answer 1

Einstellung der Anzeigeeigenschaft zu biegen, werden die Elemente erlauben, in einer Zeile zu sitzen, solange das nicht zu breit sind.

.portfolioWrapper { 
 
    display:flex; 
 
    justify-content: space-around; 
 
}

 <div id="Portfolio"> 
 
      <div class="portfolioWrapper"> 
 

 
       <a class="portfolioLink" href="#"> 
 
       <div class="portfolioProject"> 
 
        <h4>Sample Project</h4> 
 
       </div> 
 
       </a> 
 

 
       <a class="portfolioLink" href="#"> 
 
       <div class="portfolioProject"> 
 
        <h4>Sample Project</h4> 
 
       </div> 
 
       </a> 
 

 
       <a class="portfolioLink" href="#"> 
 
       <div class="portfolioProject"> 
 
        <h4>Sample Project</h4> 
 
       </div> 
 
       </a> 
 

 
      </div> 
 
     </div>

Answer 2

Nun, zunächst müssen Sie Ihre Anker innerhalb der div Behälter bewegen:

<div class="portfolioProject">

<a class="portfolioLink" href="#"><h4>Sample Project</h4></a>

</div>

können Sie CSS-Selektoren verwenden display: inline-block setzen auf das Kind sie angezeigt werden nebeneinander, wie so zu erhalten Anker:

div > a { display: inline-block;}

Edit: @GCyrillus wies darauf hin, Sie müssen die Anker nicht zurück in die divs setzen, wenn der Dokumenttyp HTML5 ist. Sie können dies mit folgendem CSS beheben:

div > a { 
    display: inline-block; 
} 

Updated JSFiddle example

Answer 3

Sie können versuchen, Einstellung .portfolioWrapper relativ zu positionieren und dann setzen Sie alle .portfolioLink zu display: inline-block und stellen eine Breite von 33% je auf die Länge deines äußeren Containers. Sie sollten keinen Gleitpfad verwenden müssen, wenn Sie Inline-Block verwenden.

.portfolioWrapper { 
 
    position: relative; 
 
    } 
 

 
.portfolioLink { 
 
    display:inline-block; 
 
    width: 33%; 
 
    }