Question

我在台式机上进行了设置，左侧有一个标题，右侧有一个图像。当我将浏览器折叠到小于880px时，我希望图像位于标题下方的中心。

我正在努力使图片居中且位于标题下方。

我是html / css的新手，因此非常感谢所有提示。

<section class="hero">
      <div class="hero-inner">
        <h1>Lorem ipsum dolor<span class="blue-dot">.</span></h1>
      </div>

      <div class="split split-right">
        <img src="https://vignette.wikia.nocookie.net/undertale-rho/images/5/5f/Placeholder.jpg/revision/latest?cb=20180213155916" alt="working" class="right-image">
      </div>
    </section>

    <div class="clients">
      <h2>Lorem ipsum dolor & sit amet</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
    </p>
    </div>

Answer 1

尝试使用CSS media Query，以检测其中（断点）要的DIV至堆栈。请参见下面的示例，并根据需要进行调整。

.myDiv {
  height: 150px;
  width: 150px;
  display: inline-block;
  background-color: orange;
  margin-bottom: 25px;
}

/* The block of code below tells the browsers what to do on a screen that has a width of 320px or less */

@media screen and (max-width: 320px) {
  
  .myDiv {
  width: 90%;
  display: block; /* Stops it from floating */
  margin: auto; /* Ensures that it is centered */
  margin-bottom: 25px; /* Space between the stacked elements */
    
  }
  
}

<div class="myDiv"></div>
<div class="myDiv"></div>

More on CSS Media Query

here实际使用。调整浏览器，看看它是如何工作的。

Answer 2

问题在于您的CSS。在这里，我将您的CSS修改为仅使图像和标题具有响应性。

[https://jsfiddle.net/ss123/a7q834sL/1/][1]

只需使用 css flex box 即可实现您期望的样式。为此，您必须首先将内容放入容器中并使其成为 display：flex 。然后，您可以对容器内的内容使用flex样式。 flex-direction：column 将内容叠加。 flex-direction：row 会将内容放在一行中。 jstify-content：space-venly 将证明内容元素之间的间距完全均匀。

Answer 3

您在这里拥有正确的媒体查询的正确位置。我会避免在图像上使用绝对定位，因为它会准确设置在您告诉它的位置，而且不太灵活。居中可以通过几种方式完成，例如其他人提到的flex box，甚至只是将text-align放在其父元素上。在移动设备上进行媒体查询时，由于厌倦了台式机的填充或vh / vw，当屏幕尺寸变小时，您可能不希望这些内容仍然存在。在您的示例中，您似乎希望删除移动设备上的填充和vh。另外，为了帮助您简化CSS的管理，我建议将媒体查询放在类中，以避免重复很多代码，例如：

.hero-inner {
    /* Flexbox Stuff */
    display: flex;
    align-items: center;

    /* Text styles */
    text-align: left;
    width: 50px;
@media only screen and (max-width: 880px) {
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 80vw;
 }
}

Answer 4

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12 ">

   <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-left">


        <img src="https://vignette.wikia.nocookie.net/undertale-rho/images/5/5f/Placeholder.jpg/revision/latest?cb=20180213155916" alt="working" class="right-image">


   </div> 

    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-right">


    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
    </p>

    </div>
     </div>

</body>
</html>

如何在移动设备上堆叠两个div，但在桌面上并排放置呢？

4 个答案: