html - 在响应式网页中对齐 div 时出错

Question

我对两个 div 的对齐有疑问。我正在为响应式页面使用 bootstrap。

This is the image on desktop

This is the image on mobile

这就像图像没有根据容器 div 自行调整，只是停留在原始位置。

这是 HTML 代码:

     <div class="Guy">
         <div  class="img_guy">
            <img src="./images/profile1.png" class="img-circle img-responsive">
       </div>

            <div  class="Content">
            <h1 class="tagline">JAMES H. MAYER, ESQ.</h1>
             <br> 
            <h2 class="tagline">San Diego's "Top Lawyers" (Mediation)</h2>
            <h2 class="tagline">San Diego Magazine 2012-2015" (Mediation)</h2>
            </div>
        </div>

这是 CSS 代码:

    .Guy {
    margin:  2% auto;
    float:left;
      max-width: 800px;
      overflow:hidden;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .5);
      box-shadow: 0 0 8px rgba(0, 0, 0, .8);
      border-radius: 112px;
    }

    .img_guy {
     float:left;
      width:40%;
      height:64%;  
    }

    .Content {
         float:left;
         width: 45%;
         height:60%;
    }

    .Content h1 {
      color: #E4A500;
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 100%;
    }

    .Content h2 {
      color: #e1e8f0;
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 90%;
    }

任何可能导致此问题的提示？

Answer 1

这是一个示例，说明如何做到这一点，以便在移动设备上保持高度响应的特性。

请查看完整页面的示例代码段，然后缩小您的浏览器。

#guy {
  background: url('http://www.getitdonecleaning.co.uk/wp-content/uploads/2013/11/office-cleaning-fife.jpg') center center no-repeat;
  background-size: cover;
  color: white;
}
.people-list {
  max-width: 600px;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 112px;
}
.profile,
.details {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}
.details h2 {
  color: #E4A500;
  font-size: 150%;
  margin: 15px auto;
}
.details h3 {
  color: white;
  font-size: 100%;
  margin: 10px auto;
}
@media (max-width: 480px) {
  .profile img {
    height: 150px;
  }
  .people-list {
    max-width: 100%;
  }
  .profile,
  .details {
    margin-right: 2px;
    margin-left: 2px;
  }
  .details h2 {
    font-size: 120%;
  }
  .details h3 {
    font-size: 90%;
  }
}
@media (max-width: 360px) {
  .people-list {
    border-radius: 0;
  }
  .profile,
  .details {
    display: block;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron" id="guy">
  <div class="container">
    <h1>Some other Title Here</h1>

    <div class="people-list">
      <div class="profile">
        <img src="http://lorempixel.com/200/200/people" class="img-circle" />
      </div>
      <div class="details">
        <h2>JAMES H. MAYER, ESQ.</h2>

        <h3>San Diego's "Top Lawyers" (Mediation)</h3>

        <h3>San Diego Magazine 2012-2015" (Mediation)</h3>

      </div>
    </div>
  </div>
</div>

更新

就结构而言:在这种情况下使用超大屏幕是有意义的，因为您使用的是 Bootstrap(它负责大部分的 H1 和背景)，然后将所有元素放在一个 div 中以创建一个图像和文本的空间 (.people-list)，因此您可以独立于包含在其中的对象设置边距/填充/宽度等。

对于使用 display:table-cell 的图像/文本，它将像 s 一样对待这些元素以及 vertical-align 所以一切都居中在你的主分区内。

剩下的就是使用媒体查询来调整所有尺寸，使您的图像/文本不会被压在一起，并保持可读性和用户友好性。 (注意:由于我有一些重复/不必要的规则，我也借此机会重构了它。)

旁注:为什么我将显示更改为在 360 像素以下显示 block 。有许多设备(即 iPhone 4/5)的 CSS 宽度为 320px。出于多种原因，尝试在小屏幕上并排显示图像和文本并不理想。

*通过调整浏览器大小查看图像和示例片段。并在实际设计上进行测试，这一点怎么强调都不为过。

未更改的显示属性:缩小至 320 像素(*如果您使用桌面，则可能需要使用 Firefox)

请注意，没有display: row 属性:参见MDN

#guy {
  background: yellow;
  color: white;
}
.people-list {
  max-width: 600px;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 112px;
}
.profile,
.details {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}
.details h2 {
  color: #E4A500;
  font-size: 150%;
  margin: 15px auto;
}
.details h3 {
  color: white;
  font-size: 100%;
  margin: 10px auto;
}
@media (max-width: 480px) {
  #guy {
    background: teal;
  }
  .profile img {
    height: 150px;
  }
  .people-list {
    max-width: 100%;
  }
  .profile,
  .details {
    margin-right: 2px;
    margin-left: 2px;
  }
  .details h2 {
    font-size: 120%;
  }
  .details h3 {
    font-size: 90%;
  }
}
@media (max-width: 360px) {
  #guy {
    background: lightblue;
  }
  .people-list {
    border-radius: 0;
  }
}
@media (max-width: 320px) {
  #guy {
    background: red;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron" id="guy">
  <div class="container">
    <h1>Some other Title Here</h1>

    <div class="people-list">
      <div class="profile">
        <img src="http://lorempixel.com/200/200/people" class="img-circle" />
      </div>
      <div class="details">
        <h2>JAMES H. MAYER, ESQ.</h2>

        <h3>San Diego's "Top Lawyers" (Mediation)</h3>

        <h3>San Diego Magazine 2012-2015" (Mediation)</h3>

      </div>
    </div>
  </div>
</div>