欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何把頁腳塊和圖片放在同一y線上？

CSS
夏志豪2年前8瀏覽0評論

我用自定義css制作新聞列表(我不使用任何引導(dǎo)程序或類似的庫) 圖像在左邊，內(nèi)容在右邊。我還需要將div與頁腳塊類放在一起 與圖像位于同一y線的內(nèi)容下方。 但結(jié)果有點(diǎn)不同:https://prnt.sc/KRY1kmwoUNHP

我預(yù)料到了這一點(diǎn)。頁腳塊屬性

height: 24px;
position:relative;
bottom:-24px;

會成功，但它沒有。

如何用跨平臺決策修復(fù)？

.news-block-wrapper {
  news-block-wrapper
}

.news-title {
  width: 1094px;
  height: 24px;
  top: 20px;
  left: 440px;
  font-size: 20px;
  line-height: 24px;
  color: #D4D4E1;
  text-transform: uppercase;
}

.news-img {
  width: 400px;
  height: auto;
  top: 20px;
  left: 20px;
  margin-right: 20px;
  /*border: 2px dotted yellow;*/
}

.news-content-wrapper {
  display: inline;
  width: 1332px;
  height: 48px;
  top: 54px;
  left: 440px;
  text-align: left;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #B0B0BD;
}

.img-left-float {
  float: left !important;
}

.news-row {
  margin-bottom: 20px !important;
  border: 2px dotted yellow;
  height: 100%;
}

.footer-block {
  border: 2px dotted red;
  height: 24px;
  position: relative;
  bottom: -24px;
}

.news-content {
  margin: 0;
  margin-bottom: 10px;
  padding: 2px;
  line-height: 1.6em;
  text-align: left;
}

.clear {
  clear: both;
}

<div class="news-block-wrapper">
  <div class="news-row">

    <img src="https://loremflickr.com/860/640" class="img-left-float news-img" alt="Test news Maxime assumenda natus neque.">

    <div class="news-content-wrapper">
      <h5 class="news-title">
        <a href="">
                        16=&gt;Test news Maxime assumenda natus neque.
                    </a>
      </h5>

      <p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum. Libero sit quae fugit sequi. Eum consequuntur delectus magni fugit adipisci. Consequatur velit consectetur omnis inventore tenetur. Voluptas nesciunt voluptatem perferendis
        consequatur fugit id sit magni. Cupiditate dolor modi ipsum eum similique. Neque vitae minus vel velit dolores blanditiis porro. Occaecati odit sequi et ut dolore autem.
      </p>
      <div class="footer-block">
        16=&gt;Links
      </div>
    </div>

    <div class="clear"></div>
  </div>
  <div class="news-row">

    <img src="https://loremflickr.com/640/360" class="img-left-float news-img" alt="Test news Magni vel et impedit hic.">

    <div class="news-content-wrapper">
      <h5 class="news-title">
        <a href="">
                        2=&gt;Test news Magni vel et impedit hic.
                    </a>
      </h5>

      <p class="news-content">Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo
        est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium. Repellat vero qui dolorem error
        perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem
        qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore.
        Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium
        adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit
        voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores.
        Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas
        et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum
        eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci
        velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis
        unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa
        quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.
      </p>
      <div class="footer-block">
        2=&gt;Links
      </div>
    </div>

    <div class="clear"></div>
  </div>
</div>

.container{
  display:flex;
  
}
.image img{
  width:300px;
  height:300px;
}
  .news-title {
        width: 1094px;
        height: 24px;
        top: 20px;
        left: 440px;
        font-size: 20px;
        line-height: 24px;
        color: #D4D4E1;
        text-transform: uppercase;
    }
       .news-content-wrapper {
        display: inline;
        height: 300px;
        margin-left:10px;
        text-align: left;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #B0B0BD;
    }
    .news{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }

<div class="container">
<div class="image">
<img src="https://loremflickr.com/860/640" alt="Test news Maxime assumenda natus neque.">
</div>
<div class="news-content-wrapper news">
<div >
            <h5 class="news-title">
                <a href="">
                    16=&gt;Test news Maxime assumenda natus neque.
                </a>
            </h5>
            
            <p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum. Libero sit quae fugit sequi. Eum consequuntur delectus magni fugit adipisci. Consequatur velit consectetur omnis inventore tenetur. Voluptas nesciunt voluptatem perferendis consequatur fugit id sit magni. Cupiditate dolor modi ipsum eum similique. Neque vitae minus vel velit dolores blanditiis porro. Occaecati odit sequi et ut dolore autem.
            </p>
            
</div>

            <div class="footer-block">
                16=&gt;Links
            </div>
        </div>
</div>

上一篇c 生成json
下一篇des.json