主页 / 问题 / 954117
Accepted
Павел Ериков
Asked:2020-03-09 04:32:23 +0000 UTC2020-03-09 04:32:23 +0000 UTC

新闻块布局

  • 772

在此处输入图像描述

有一个小块我想布局，但无法布局。问题是我只是不明白如何调整所有内容以使所有内容都足够且具有适应性。请帮我弥补这个块或告诉我什么和如何做。保持适应性很重要。好吧，例如，使用小屏幕时，内容位于照片下方。

加法：在纯CSS上）

添加： 在此处输入图像描述

css

2 个回答

  1. 字体颜色很好，margin我会给你一些分数

    <!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col text-left h2">Новость</div>
            <div class="col text-right">fds</div>
        </div>
        <div class="row mt-3">
            <p class="text-justify"> 
                <img class="float-right ml-4 mb-4" src="https://bugaga.ru/uploads/posts/2014-06/1402471536_prikoly-6.jpg" width="30%" height="auto">
                01.01.2019<br>Заголовок<br>
                <br>
                <br>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab, corporis. Dolore quo cumque excepturi numquam impedit voluptates pariatur repellendus quibusdam sapiente autem ullam illo quasi eos reiciendis, provident tempore nulla.
                Ad quod explicabo alias illum culpa. Itaque officiis rem quia eius? Ipsa aperiam architecto laboriosam quis veniam, fuga accusamus ex, dignissimos ut nam quasi eos velit molestiae deserunt iure perferendis?
                Quo laboriosam odit voluptates fugit tempore ducimus voluptas corporis laborum tenetur officiis, saepe id necessitatibus similique quidem! Provident architecto necessitatibus voluptate earum corporis quas omnis, hic suscipit impedit? Earum, reiciendis?
                Consequatur inventore maxime perspiciatis quaerat ullam deleniti cumque consequuntur laudantium nisi tempore ipsa sapiente, ex dolor reiciendis odit temporibus, voluptates dicta soluta numquam officia, quae dolorum itaque eveniet. Cupiditate, laboriosam.
                Quae alias optio neque nisi ipsam amet commodi laboriosam hic tenetur incidunt veritatis reprehenderit expedita impedit officiis maiores, odio ipsum quis quaerat voluptatem. Corporis a animi molestias aliquam dignissimos eveniet?
                Provident nesciunt adipisci nemo a officiis, consequatur nisi, consequuntur possimus laboriosam quibusdam placeat non blanditiis? Reiciendis saepe repellat, iusto placeat cupiditate, at, explicabo animi vero iure maxime doloremque numquam fugit?
                Aliquam quasi quibusdam in sit. Officia soluta maiores voluptate mollitia consequatur voluptatibus a, animi rem? Enim suscipit deleniti similique, beatae, veniam, possimus ipsum ut hic velit harum tempore ex quia!
                Rem fugiat ex impedit eum eaque facere, nobis amet deleniti tempore recusandae similique voluptates enim id, qui quasi quidem quia sed commodi maiores. Numquam, soluta praesentium beatae assumenda dicta possimus?
                Est atque, officiis dolorem ratione magni consequatur explicabo voluptatem incidunt modi temporibus facilis ad necessitatibus laborum labore quos asperiores ipsam repellat tempora nihil sunt dicta ea facere qui minima. Quam.
                Aspernatur quas unde voluptatibus obcaecati impedit harum officia dolore similique ratione dolores, blanditiis sit aut itaque debitis in et nobis nesciunt neque eaque quia quis necessitatibus? Tenetur inventore adipisci ullam?
                Natus corporis animi ipsam, provident ex delectus, minus dolor quis veritatis voluptatem vitae id quidem eum voluptate fugiat quo nobis possimus ea consectetur. Atque nulla deleniti itaque sint, perferendis veniam.
                Ad harum quasi excepturi, illo aliquid vel eaque obcaecati est! Ipsum, accusantium sint porro dolorem dignissimos tenetur maiores nisi voluptatum illum temporibus. Minima, saepe minus molestiae atque nemo corporis deleniti?
                Possimus quod quibusdam, nesciunt consequuntur minus dolor sed. Repellat impedit molestias amet architecto quas dolores iusto a commodi dolor vitae delectus reiciendis omnis obcaecati voluptas fugit quis saepe, repudiandae accusamus.
            </p>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

    在此处输入图像描述

    所以你在你的css中创建一个类container 并在那里写你看到的样式

    • 3
  2. Best Answer

    我建议您阅读有关 flexbox 的内容，这是一种构建布局的非常优雅的方式

    body
{
  font-family: sans-serif;
}

.news-cont {
  display: flex;
  flex-direction: column;
}

.news-cont .content {
  flex-grow: 1;
}

.news-cont .content img {
  float: right;
}

.news-cont .hud
{
  display: flex;
  
  justify-content: space-between;
  align-items: center;
}

.news-cont .hud .links a
{
  padding: 0 20px;
}
.publish-date
{
  color: #777;
}
.news-cont .content .title
{
  color: #333;
}
    <section class="news-cont">
  <div class="hud">
    <h1 class="title">Breaking News</h1>
    <div class="links">
      <a href="/">Reddit</a>
      <a href="/">facebook</a>
    </div>
  </div>
  <article class="content">
  <img src="https://dummyimage.com/400x400/000/fff" alt="img" width="200">
    <h2 class="title">Title</h2>
    <p class="publish-date">Publish date</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime tempora ab ullam id ratione odio recusandae vel tenetur, nemo, eligendi mollitia vero placeat, officiis non! Error vel officiis omnis aut? ipsum dolor sit amet, consectetur adipisicing elit. Sunt, amet maiores, inventore optio quae sequi mollitia laudantium illum, dolore distinctio quo architecto earum impedit laborum, sit animi nisi quibusdam hic. ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, a eveniet, sint ipsam tempora at voluptates eaque velit! Distinctio velit maxime nostrum corporis aspernatur, voluptatem. Pariatur soluta ipsum, cum eius.</p>
  </article>
</section>

    • 1

相关问题