Html CSS-制作家长&；儿童部'；等高_Html_Css

Html CSS-制作家长&；儿童部'；等高

html css

Html CSS-制作家长&；儿童部'；等高,html,css,Html,Css,我试图创建的内容如下所示： -------------------------------------------------- | | | | | | .box1 | .box2 | | | | | | .image --

我试图创建的内容如下所示：

 --------------------------------------------------
 |                        |           |           |
 |                        | .box1     | .box2     |
 |                        |           |           |
 |   .image               -------------------------
 |                        |                       |
 |                        |     .description      |
 |                        |                       |
 |                        |                       |
 --------------------------------------------------

其中，.box1和.box2彼此之间的高度相同（f.e.

flex:1；

），并且，.box1、.box2和.description周围的图像和外壳大小相同

我似乎找不到一种方法可以做到这一点，我认为Flexbox的例子在这种情况下是罕见的

我认为对于本例来说，一个表是可行的，它有一个嵌套的表，如下所示：

<table class="parent-wrapper">
  <tr>
    <td class="image">
      <img src="...."/>
    </td>
    <td class="parent-box">
      <table class="child-wrapper">
        <tr>
          <td class="box1">.box1</td>
          <td class="box2">.box2</td>
        </tr>
        <tr>
          <!-- I don't know a workaround for this as well -->
          <td class="description" colspan="2">.description</td>
        </tr>
      </table>
    </td>
 </tr>
</table>


.box1
.box2
描述

但结果如下所示：

<table class="parent-wrapper">
  <tr>
    <td class="image">
      <img src="...."/>
    </td>
    <td class="parent-box">
      <table class="child-wrapper">
        <tr>
          <td class="box1">.box1</td>
          <td class="box2">.box2</td>
        </tr>
        <tr>
          <!-- I don't know a workaround for this as well -->
          <td class="description" colspan="2">.description</td>
        </tr>
      </table>
    </td>
 </tr>
</table>

我想要的是“图像”td的大小与“子包装”td的高度相同

所以这个：（用硬编码的高度制作）

您必须在td中包含colspan和说明

<td class="descrtiption" colspan="2">.description</td>

。说明

您必须在td中包含colspan和说明

<td class="descrtiption" colspan="2">.description</td>

。说明

检查下面的代码。。你会有一些想法的。。下面代码的结果屏幕截图

表格{
宽度：100%
}
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
填充物：5px；
}
th，td{
填充：35px；
}


形象
盒子
盒子
描述

检查下面的代码。。你会有一些想法的。。下面代码的结果屏幕截图

表格{
宽度：100%
}
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
填充物：5px；
}
th，td{
填充：35px；
}


形象
盒子
盒子
描述

Flexbox示例：

这个不需要桌子

编辑：更新以符合要求。使用

.image

上

250px

的（速记

flex basis

）

20%

和

min width

，以符合您的口味。请注意，我通过样式设置背景图像，因为我假设它将来自后端

也许您还需要主容器上的最小高度

.block{
显示器：flex；
}
.形象{
弹性：01.20%；
最小宽度：250px；
背景：#f00；
颜色：#fff；
背景尺寸：封面；
背景位置：50%50%；
}
.图像img{
显示：块；
宽度：100%；
高度：自动；
}
.内容{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
.盒子{
显示器：flex；
弹性：1；
}
.box1{
背景：青色；
弹性：1；
}
.box2{
背景：黄色；
弹性：1；
}
.说明{
弹性：1；
背景：531777；
颜色：#fff；
}


.box1
.box2
描述


Lorem ipsum dolor sit amet，是一位杰出的献身者。这是欧洲的脉搏。这是一个很好的例子。阿利奎姆·埃拉特·帕特。这是一种非常有效的方法。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。怀孕期间和怀孕期间。丘脑便利区。