Question

我正在尝试制作一个布局，其中图像旁边放置了textarea。图像可能有不同的大小，但我要强制图像高450像素，然后使用CSS自动调整宽度。我希望textarea填补余下的空间。我不知道图像的宽度，我不想计算它，我希望解决方案完全是CSS。

Stack Overflow中的任何人都可以留意我的电话吗？

JsFiddle：http://jsfiddle.net/vo03yzzy/

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

HTML（只是文字）：

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

Just text, looks great!

粉红色单元格（包含文本）会自行调整大小，以便填充图像旁边的剩余空间。

现在，如果我用textarea替换文本，它看起来就不那么漂亮了。

HTML（带textarea`）：

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

with a textarea - what happened?

紫色单元格（包含图像）现在变得不必要地变大了。

这是我的CSS：

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

我尝试用textarea div包裹display:block - 没有运气。我已尝试position:absolute并使用display。

小提琴的更多细节：http://jsfiddle.net/vo03yzzy/

帮我Stack Overflow，你是我唯一的希望！

Answer 1

如果要保留表格布局，可以为.left-cell分配100％的宽度，这将强制表格调整表格单元格宽度，使图像单元格缩小到 - 适合宽度，剩余宽度分配给左侧单元格（100％是最大值，然后是特定宽度）。

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

＆＃13;

.container {
  background-color: seagreen;
}
table,
td,
tr {
  padding: 0;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
}
table {
  width: 100%;
}
td {
  background-color: #ffeeee;
  vertical-align: top;
}
td.left-cell {
  width: 100%;
}
.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;
}

＆＃13;

<div class='container'>
  <table>
    <tr>
      <td class="left-cell">
        <textarea>During winter, cold air masses from Siberia blow towards Japan, picking up moisture from the Sea of Japan in the process. The wet cold air collides with the mountains along the Sea of Japan coast, resulting in heavy snowfall. Some areas experience
          extreme amounts of precipitation with snow depths of three to six meters. Fittingly, Japan offers many popular destinations for snow seekers. While most of Japan's major cities, including Tokyo, Kyoto and Osaka, receive only small amounts of
          snow, locations offering snow experiences are readily accessible from them. The snow season in Japan is long and in some places begins as early as November and lasts into May, with the peak being in February.</textarea>
      </td>
      <td class='tdimg'>
        <img src='http://360niseko.com/blog/wp-content/uploads/2012/03/igloo-snow-bricks_2012-03-26.jpg' />
      </td>
    </tr>
  </table>
</div>

＆＃13;

Answer 2

如果可能的话，应该尽量避免使用繁重的表格。维护，可用性，更不用说语义问题应该在你的头脑中设置警告，说“不要这样做！”不要这样做！＆＃34; ： - ）

这样的事情怎么样？ http://jsfiddle.net/1twng6L3/1/

没有像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>

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

您也可以考虑提供全分辨率图像的带宽。我确定您会在生产代码中采用不同的方法，因此要小心我们使用此类资产消耗的带宽是明智的。可能会杀死所有移动或数据绑定的用户。（只是一个想法）

HTML / CSS Fluid Textarea在Image旁边的表格中

2 个答案: