css 如何在HTML中创建一个2x2表格，并在右侧添加文本

xjreopfe 于 2023-05-23 发布在其他

关注(0)|答案(1)|浏览(82)

这是我必须要做的

我的代码不工作。表格中间有一个很大的空白，文字不在旁边，它太大了，背景颜色也不合适。
我试过这个：

div {
  background-color: #6655b3;
}

aside {
  width: 720px;
  float: right;
  height: 600px;
  margin-bottom: 10px;
  background-color: #6655b3;
}

.tabla-con-imagenes table {
  float: left;
}

.tabla-con-imagenes img {
  max-width: 40%;
  height: auto;
  display: block;
}

<h2 ALIGN=center>Sinopsis</h2>
<div class="tabla-con-imagenes">
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <img src="imagen1.jpg" alt="Imagen 1">
      </td>
      <td>
        <img src="imagen2.jpg" alt="Imagen 2">
      </td>
    </tr>
    <tr>
      <td>
        <img src="imagen3.jpg" alt="Imagen 3">
      </td>
      <td>
        <img src="imagen4.jpg" alt="Imagen 4">
      </td>
    </tr>
  </table>
  Your text
  <aside>
    <p ALIGN=right>TEXT.</p>
  </aside>
</div>

css

来源：https://stackoverflow.com/questions/76304365/how-to-make-a-2x2-table-in-html-with-a-text-in-the-right

1条答案

按热度按时间

izj3ouym1#

到目前为止，网格是安排这种布局的最佳方式。为了让你开始这里有一些资源：

CSS技巧-a complete guide to grid
凯文·鲍威尔-Learn CSS the easy way
凯文鲍威尔-Get started with grid without being overwhelmed
W3Schools - Grid Module
学习CSS Grid -does what it says
MDN - Grid

您使用网格的布局可以在下面看到。我已经注解了相关的位：

.container {
  display: grid; /* set up grid */
  grid-template-columns: 1fr 1fr 2fr; /* set up 3 columns, the last one being twice as big as the first two*/
  grid-auto-rows: 1fr; /* all the rows are to be the same height */
  gap: 0.5rem; /* put a 0.5 rem gap between all elements */
}

aside {
  grid-row: span 2; /* make the aside span 2 rows */
  outline: 1px solid red;
  margin-left: 0.5rem;
}

/* Just prettification stuff below */

body {
  font-family: Arial, Helvetica, sans-serif;
}

h2 {
  text-align: center;
}

img {
  display:block;
  width:100%;
}

<h2>Sinposis</h2>
<div class='container'>
  <div class='image'><img src='http://placekitten.com/300/200'></div>
  <div class='image'><img src='http://placekitten.com/300/200'></div>
  <aside>
    Some text here
  </aside>
  <div class='image'><img src='http://placekitten.com/300/200'></div>
  <div class='image'><img src='http://placekitten.com/300/200'></div>
</div>

赞(0）回复(0）举报 2023-05-23

我来回答

css 如何在HTML中创建一个2x2表格，并在右侧添加文本

1条答案

相关问题

热门标签

最新问答