HTML/CSS流体文本表内图像旁边的区域

我正在尝试制作一个布局，其中图像旁边有一个

textarea

。图像可能大小不同，但我将强制图像为450px高，然后使用CSS自动调整其宽度。我希望

textarea

填充剩余的空间。我不知道图像的宽度，我不想计算它，我希望解决方案完全是CSS

我的电话有人听吗

JsFiddle：

我尝试过使用浮动，但最接近的解决方案是使用表格

HTML（仅文本）：

我尝试过用

display:block

将

textarea

包装在

div

中-运气不好。我尝试了

位置：绝对

和玩

显示

更多详细信息，请访问fiddle：

---

帮我，你是我唯一的希望

如果要保留表格布局，可以将100%的宽度分配给

.left单元格

，这将迫使表格调整表格单元格宽度，以便图像单元格具有“缩小到适合”的宽度，而剩余的宽度分配给左单元格（100%的最大宽度大于特定宽度）

表格布局的优点是，textarea单元格将与包含图像的单元格具有相同的高度，这对于某些布局可能是可取的，具体取决于您的设计要求

.container{
背景色：海绿；
}
桌子
运输署，
tr{
填充：0；
保证金：0；
边界塌陷：塌陷；
边界间距：0；
}
桌子{
宽度：100%；
}
运输署{
背景色：#ffeeee；
垂直对齐：顶部；
}
左室{
宽度：100%；
}
.tdimg{
文本对齐：右对齐；
背景色：#eeeeff；
}
img{
高度：450px；
宽度：自动；
边框：1px紫色实心；
保证金：0；
填充：0；
垂直对齐：顶部；
显示：内联；
}
文本区{
高度：450px；
宽度：100%；
垂直对齐：顶部；
保证金：0；
填充：0；
显示：块；
}

冬季，来自西伯利亚的冷空气团吹向日本，在这个过程中从日本海吸收水分。湿冷空气与日本海沿岸的山脉相撞，导致大雪。一些领域的经验
极端降水量，积雪深度为3至6米。合适的是，日本为探雪者提供了许多受欢迎的目的地。而日本的大部分主要城市，包括东京、京都和大阪，只收到少量的辐射
在雪地上，提供雪地体验的地点很容易到达。日本的雪季很长，有些地方最早从11月开始，一直持续到5月，最高峰在2月。

如果可能的话，应该避免大量使用表格。维护、可用性，更不用说语义问题，应该在你的头脑中敲响警钟，说“不要这样做！不要这样做！”：-）

像这样的怎么样

没有什么比flexbox更前卫的了，但确实需要一些盒子尺寸来添加一些填充物

简单的规则。简单的HTML

<h1>Without the tables</h1>

<div class="row">
    <div class="col">
        <textarea></textarea>
    </div>
    <div class="column">
        <img src='http://360niseko.com/blog/wp-content/uploads/2012/03/igloo-snow-bricks_2012-03-26.jpg' />
    </div>
</div>

---

<>你也可以考虑服务全分辨率图像的带宽。我相信您会在生产代码中采用不同的方法，明智的做法是小心使用这样的资产消耗的带宽。可能会杀死任何移动或数据绑定用户。（只是想一想）

Flexbox可能会做您想做的事情mkaatman您的示例仅显示文本。我可以得到与文本布局良好；我需要一个文本区。尽管如此，我还是会玩flex box。谢谢。您是否正在寻找不涉及表格的解决方案？我用表格发布了一些似乎有效的东西。

<table>
    <tr>
        <td>
            <textarea>During winter ....</textarea>
        </td>
        <td class='tdimg'>
            <img src='http://.....' />
        </td>
    </tr>
</table>

table {
    width: 100%;
}
td {
    background-color: #ffeeee;
    vertical-align:top;
}
.tdimg {
    text-align:right;
    background-color: #eeeeff;
}
img {
    height: 450px;
    width: auto;
    border: 1px purple solid;
    margin:0;
    padding:0;
    vertical-align: top;
    display: inline;
}
textarea {
    height: 450px;
    width: 100%;
    vertical-align: top;
    margin: 0;
    padding: 0;
    display:block;
}
table, td, tr {
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

<h1>Without the tables</h1>

<div class="row">
    <div class="col">
        <textarea></textarea>
    </div>
    <div class="column">
        <img src='http://360niseko.com/blog/wp-content/uploads/2012/03/igloo-snow-bricks_2012-03-26.jpg' />
    </div>
</div>

.col { 
    position: relative;
    width: 50%;
    height: 425px; 
    padding: 0 2%;
    margin: 0;
    box-sizing: border-box;
    float: left;
}
.col textarea {
    width: 100%;
    height: 420px;
    float: left;
}
.col img {
    position: relative;
    top: 0;
    right: 0;
    height: 425px;    
}