Question

我正在使用在线编辑器创建网站。我有一个简单的表，有两列和一行。在桌面上，它看起来很棒但在移动设备上我必须向左和向右滚动才能看到内容。

我想在小屏幕上对第二列进行回应。

这是我的代码：

<div style="overflow-x: auto;">
  <table style="height: 452px; width: 821px; margin-left: auto; margin-right: auto;">
    <tbody>
      <tr style="height: 143.6px;">
        <td style="width: 280px; height: 143.6px;"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></td>
        <td style="width: 439px; height: 143.6px;">
          <h3 style="text-align: left;"><span style="color: #333333;"><b>It all starts with a test</b></span></h3>
          <br />
          <p style="line-height: 1.6; text-align: left;"><span style="color: #333333; font-size: large;">This is an example. This is an example. Testing and testing again.</span></p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

所以在这个例子中，我希望将文本部分放在小屏幕上的图片下面。我该怎么办呢？

谢谢大家！

Answer 1

你不应该使用表格。表格在责任方面非常不方便。

使用CSS网格布局。在我的示例中，尝试调整屏幕大小。当它变窄时，列会在另一个下移动。当窗口相对较宽时，您可以并排看到它们。

https://jsfiddle.net/33fLLdzr/1/

<div class="wrapper">
    <div class="box sidebar"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></div>
    <div class="box sidebar2">
        <h3 style="text-align: left;">It all starts with a test</h3>
        <p style="line-height: 1.6; text-align: left;">This is an example. This is an example. Testing and testing again.</p>
    </div>
</div>

<style>
body {
    margin: 40px;
}

.sidebar {
    grid-area: sidebar;
}

.sidebar2 {
    grid-area: sidebar2;
}

.wrapper {
    background-color: #fff;
    color: #444;
}

.wrapper {
    display: grid;
    grid-template-areas:
        "sidebar"
        "sidebar2"
}

@media only screen and (min-width: 600px) {
    .wrapper {
        grid-template-columns: 50% 50%;
        grid-template-areas:
        "sidebar sidebar2"
    }
}
</style>

Answer 2

您可以使用媒体查询将display: block; width: 100%; height: auto;应用于table，tr和td。这样你就可以将td s在彼此之下流动的所有常规块元素组成。

根据需要设置断点。在我的片段中，我将其设置为600px;

尽量避免使用内联样式。如果你想使用媒体查询，他们真的在你的方式......

html, body {
margin: 0;
}
table {
  height: 452px;
  width: 821px;
  margin-left: auto;
  margin-right: auto;
}
tr {
height: 143.6px;
}
td.x {
  width: 280px;
  height: 143.6px;
}

td.y {
  width: 439px;
  height: 143.6px;
}

@media screen and (max-width: 600px) {
  table,
  tr,
  td.x,
  td.y {
    display: block;
    width: 100%;
    height: auto;
  }
}

<div style="overflow-x: auto;">
  <table>
    <tbody>
      <tr>
        <td class="x"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></td>
        <td class="y">
          <h3 style="text-align: left;"><span style="color: #333333;"><b>It all starts with a test</b></span></h3>
          <br />
          <p style="line-height: 1.6; text-align: left;"><span style="color: #333333; font-size: large;">This is an example. This is an example. Testing and testing again.</span></p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

＆＃13;

<html>
	<head>
		<meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
    <body>
       <img class="aligncenter wp-image-4684" src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /> 
     
<a href="http://scotiafishing.com/wp-content/uploads/Best-Of-Scotland-Package.pdf" rel="">This is an example. This is an example. Testing and testing again.</a>

  </body>
</html>

＆＃13;

你想要这样的东西吗？

如何制作一个两列表响应第二列在第一列？

3 个答案: