如何在HTML响应度中创建两列? [英] How to make two columns in HTML responsiveness?
问题描述
目前，我在整个页面上有一个<table>，在页眉中有一个<table>.在标题表中，有两列填充了两个简单的图像.见下面的第一个结果:
这些列是响应式的，但是我想做的是使标题的最大宽度为640像素，最小宽度为640像素.假设这些图像只是一个例子，因为我要使用的其他图像较小，并且事实是这些图像之间没有空间.我可以添加一个填充，但是响应能力不再正常工作.
第二个是当我缩小窗口时，右侧的图像位于第一个图像的下方，这很好(请参见下面的响应结果).但是，这需要在屏幕尺寸小于640像素时发生，而不仅仅是在窗口触摸右侧图像时发生.
响应结果:
我应该怎么做才能使标题的最小和最大为640像素，并使得当窗口低于640像素时响应开始?
我使用以下代码:
<!-- WHOLE PAGE -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
<tr>
<td style="text-align: center; vertical-align: top;">
<!-- HEADER -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; ">
<tr>
<!-- Logo -->
<td align="left" style="display: inline-block; padding: 5px;">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
<!-- Logo -->
<td align="right" style="display: inline-block; padding: 5px;">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
使用下面的媒体查询到您的CSS文件.在640个设备以下，td的宽度将达到100％.
注意:我在标题table和徽标td中提到了两个类.
.logo:first-child
{
background: red;
}
.logo:last-child
{
background: blue;
}
img{
width:100%;
}
@media screen and (max-width: 640px) {
.header{
width:100%;
}
.logo{
width:100%;
}
}
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
<tr>
<td style="text-align: center; vertical-align: top;">
<!-- HEADER -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; " class="header">
<tr>
<!-- Logo -->
<td align="left" style="display: inline-block; padding: 5px;" class="logo">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
<!-- Logo -->
<td align="right" style="display: inline-block; padding: 5px;" class="logo">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
有关响应，请参见jsfiddle-
https://jsfiddle.net/vaishuk/qhqgrgnc/1/
希望这会有所帮助:)
At the moment I have one <table> for the whole page, and one <table> for the header. In the header table there are two columns filled with two simple images. See below for the first result:
These columns are responsive, but what I would like to do is to make the header a maximum width of 640 pixels, and a minimum width of 640 pixels. Assume that the images are just an example, because the other images I want to use are smaller, and the fact is that there is no space between these images. I could add a padding, but the responsiveness doesn't work properly anymore.
And the second is when I make the window smaller, the image on the right side goes under the first image which is good (see below for the responsive result). But this needs to happen already when the screen size is below 640 pixels and not just when the window touches the image on the right side.
Responsive result:
What do I need to do to make the header a minimum and maximum of 640 pixels, and to make it possible the responsive starts when the window is below 640 pixels?
I use the following code:
<!-- WHOLE PAGE -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
<tr>
<td style="text-align: center; vertical-align: top;">
<!-- HEADER -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; ">
<tr>
<!-- Logo -->
<td align="left" style="display: inline-block; padding: 5px;">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
<!-- Logo -->
<td align="right" style="display: inline-block; padding: 5px;">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Use below media query to your CSS file. It will take your td to width 100% below 640 devices.
Note: I have mentioned two class in header table and logo td.
.logo:first-child
{
background: red;
}
.logo:last-child
{
background: blue;
}
img{
width:100%;
}
@media screen and (max-width: 640px) {
.header{
width:100%;
}
.logo{
width:100%;
}
}
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
<tr>
<td style="text-align: center; vertical-align: top;">
<!-- HEADER -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; " class="header">
<tr>
<!-- Logo -->
<td align="left" style="display: inline-block; padding: 5px;" class="logo">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
<!-- Logo -->
<td align="right" style="display: inline-block; padding: 5px;" class="logo">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
See jsfiddle for responsive -
https://jsfiddle.net/vaishuk/qhqgrgnc/1/
Hope this helps :)
这篇关于如何在HTML响应度中创建两列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
