मैं एक वेबसाइट पर कई लेख पोस्ट करने की कोशिश कर रहा हूं, लेकिन कोड का उपयोग करने के बाद स्थिति का उपयोग करता है: लेखों को केंद्र में रखने के लिए पूर्ण, लेख अब एक दूसरे को ओवरलैप कर रहे हैं। मैं चाहता हूं कि लेख अनुक्रमिक क्रम में लंबवत रूप से ढेर हो जाएं। अभी लेख पूरी तरह से ओवरलैप कर रहे हैं, और अगर मेरे पास अलग टेक्स्ट होता तो यह शायद वास्तव में अजीब लगता। मुझे वास्तव में इस पर कुछ मदद की ज़रूरत है इसलिए मैंने निम्नलिखित कोड शामिल किया है।

h1 {
  margin: 0 auto;
  font-size: 80px;
  text-align: center;
  font-family: Bahnschrift;
}

.list-group {
  text-align: center;
}

#logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

#menubar {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}

a:focus,
a:hover {
  text-decoration: none;
  color: white;
}

.post-title:focus,
.post-title:hover {
  text-decoration: none;
  color: black;
}

a {
  display: inline-block;
  padding: 15px;
  font-family: Bahnschrift;
  color: black;
  font-size: 20px;
  text-decoration: none;
}

#header {
  text-align: center;
  background-color: #000000;
}

.link {
  color: white;
  font-size: 20px;
}


/* tell the container's children to float left: */

.float-my-children>* {
  float: left;
}

.float-my-children>img {
  margin-right: 5px;
  width: calc(10% - 5px);
}

.float-my-children>div {
  width: 90%;
}


/* this is called a clearfix. it makes sure that the container's children floats are cleared, without using extra markup */

.clearfix {
  *zoom: 1/* for IE */
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}


/* end clearfix*/

article {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
 <article>
     <div class="interview-link float-my-children clearfix">
         <a href="#">
             <img width="260" height="170" src="https://via.placeholder.com/300">
         </a>
         <h2 class="post-title">
             <a class="post-title" href="#"> 25 Questions With Stacey Racks </a>
         </h2>
     </div>
 </article>

 <article>
     <div class="interview-link float-my-children clearfix">
         <a href="#">
             <img width="260" height="170" src="https://via.placeholder.com/300">
         </a>
         <h2 class="post-title">
             <a class="post-title" href="#"> 25 Questions With Stacey Racks </a>
         </h2>
     </div>
 </article>

अनुक्रमिक क्रम में लंबवत रूप से ढेर करने के लिए मैं कोई विचार कैसे प्राप्त कर सकता हूं?

0
Stacey 28 अक्टूबर 2019, 22:28

1 उत्तर

सबसे बढ़िया उत्तर

फ्लेक्सबॉक्स के साथ क्षैतिज रूप से केंद्रित स्टैक बनाना बहुत आसान है:

html,
body {
  margin: 0;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.item {
  border: 1px solid;
}
<div class="container">
  <div class="item">foo</div>
  <div class="item">bar</div>
  <div class="item">baz</div>
</div>
0
GammaGames 28 अक्टूबर 2019, 19:50