Question

所以我一直在找几天，找不到解决办法。

我创建了一个WordPress网站，我的主页上显示了我最近发布的帖子。

事实是，帖子的内容以某种特定的布局编写，并且意在保持这种状态。布局无法更改！即使文本在智能手机上浏览时变得更小且可读性更差，我也需要将文本保留在原处。

当然，该网站具有响应能力。我唯一不想回应的是帖子的内容。

我已经做了很多尝试，但是我找不到方法... This page确实显示了我正在寻找的东西，除了我不希望该帖子发布由用户调整大小。我只需要它来适合父div。

.responsive-wrapper {
  border: 3px solid black;
}

.post-content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.txt-top-right {
  display: block;
  float: right;
  margin-left: auto;
  padding-right: 20px;
}

.txt-under-top-right {
  clear: both;
}

.txt-center {
  text-align: center;
}

.post-content img {
  display: block;
  max-width: 200px;
  float: right;
  padding-right: 20px;
}

<div class="responsive-wrapper">
  <div class="post-content">
    <p class="txt-top-right"><em>Div right-top corner</em></p>

    <p class="txt-under-top-right">
      Div following the one on right-top corner
    </p>

    <div class="txt-center">
      <h2>h2 in the middle of the page</h2>
      <h1>h1 in the middle of the page</h1>
      <h3>h3 in the middle of the page</h3>
    </div>

    <img src="http://cs.pes.edu/wp-content/uploads/2016/06/default.jpg" />

    <p>
      paragraph<br> on the left side<br> of the page<br> describing<br> a lot of things<br> on a lot of lines
    </p>

    <p>
      Adress<br> City<br> Country
    </p>
  </div>
</div>

我了解HTML / CSS / JS，但是我为JavaScript苦苦挣扎...我可以在html标头中插入一些带有功能的<script>标签，但是我很难理解这些功能的作用。

我希望布局保持完全相同，无论用户使用哪种设备。例如，我希望.txt-top-right段落占用此空间。在智能手机上，字体大小不应该重新调整大小并填充超过容器的此空间量。

This is an example调整窗口大小时正在发生的事情。布局完全改变了！

谢谢您的阅读，希望它足够清楚：）

使div像svg一样快速响应（文本缩小）

0 个答案: