英文:
How to make a 2x2 table in HTML with a text in the right
问题
这是我要做的事情
我的代码不起作用。表格中间有很大的空白,文字不在旁边,太大,背景颜色也没有生效。
我尝试了这个:
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
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 -->
<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>
<!-- end snippet -->
答案1
得分: 2
以下是已翻译的内容:
格子(Grid)是迄今为止最好的安排此类布局的方式。以下是一些资源,以帮助您开始:
- CSS技巧 - 完整的网格指南
- Kevin Powell - 轻松学习CSS
- Kevin Powell - 轻松入门网格布局
- W3Schools - 网格模块
- 学习CSS网格 - 如其所言
- MDN - 网格
您可以在下方看到使用网格的布局。我已注释了相关部分:
.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:
- CSS tricks - a complete guide to grid
- Kevin Powell - Learn CSS the easy way
- Kevin Powell - Get started with grid without being overwhelmed
- W3Schools - Grid Module
- Learn CSS Grid - does what it says
- MDN - Grid
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 -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论