在HTML中创建一个带有右侧文本的2×2表格。

huangapple go评论58阅读模式
英文:

How to make a 2x2 table in HTML with a text in the right

问题

这是我要做的事情

在HTML中创建一个带有右侧文本的2×2表格。

我的代码不起作用。表格中间有很大的空白,文字不在旁边,太大,背景颜色也没有生效。

我尝试了这个:

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>简介</h2>
<div class="tabla-con-imagenes">
  <table cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <img src="imagen1.jpg" alt="图片1">
      </td>
      <td>
        <img src="imagen2.jpg" alt="图片2">
      </td>
    </tr>
    <tr>
      <td>
        <img src="imagen3.jpg" alt="图片3">
      </td>
      <td>
        <img src="imagen4.jpg" alt="图片4">
      </td>
    </tr>
  </table>
  Your text
  <aside>
    <p ALIGN=right>文本。</p>
  </aside>
</div>
英文:

This is what I have to do

在HTML中创建一个带有右侧文本的2×2表格。

My code is not working. The table has a big blank space in the middle and the text is not on the aside, it is too big and the background colour doesn't get it.

I tried this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

答案1

得分: 2

以下是已翻译的内容:

格子(Grid)是迄今为止最好的安排此类布局的方式。以下是一些资源,以帮助您开始:

您可以在下方看到使用网格的布局。我已注释了相关部分:

.container {
  display: grid; /* 设置网格布局 */
  grid-template-columns: 1fr 1fr 2fr; /* 设置3列,最后一列的宽度是前两列的两倍 */
  grid-auto-rows: 1fr; /* 所有行的高度相同 */
  gap: 0.5rem; /* 在所有元素之间留出0.5rem的间隙 */
}

aside {
  grid-row: span 2; /* 让侧边栏跨越2行 */
  outline: 1px solid red;
  margin-left: 0.5rem;
}

/* 以下是一些美化样式 */

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

h2 {
  text-align: center;
}

img {
  display:block;
  width:100%;
}
<h2>概要</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>
    这里是一些文本
  </aside>
  <div class='image'><img src='http://placekitten.com/300/200'></div>
  <div class='image'><img src='http://placekitten.com/300/200'></div>
</div>
英文:

Grid is by far the best way to arrange this sort of layout. To get you started here's a few resources:

Your layout using grid can be seen below. I've annotated the pertinent bits:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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%;
}

<!-- language: lang-html -->

&lt;h2&gt;Sinposis&lt;/h2&gt;
&lt;div class=&#39;container&#39;&gt;
  &lt;div class=&#39;image&#39;&gt;&lt;img src=&#39;http://placekitten.com/300/200&#39;&gt;&lt;/div&gt;
  &lt;div class=&#39;image&#39;&gt;&lt;img src=&#39;http://placekitten.com/300/200&#39;&gt;&lt;/div&gt;
  &lt;aside&gt;
    Some text here
  &lt;/aside&gt;
  &lt;div class=&#39;image&#39;&gt;&lt;img src=&#39;http://placekitten.com/300/200&#39;&gt;&lt;/div&gt;
  &lt;div class=&#39;image&#39;&gt;&lt;img src=&#39;http://placekitten.com/300/200&#39;&gt;&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月22日 16:35:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/76304365.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定