在图片旁边的表格内的HTML/CSS流体文本区域。

[英]HTML/CSS Fluid Textarea inside table next to an Image


I am trying to make a layout where an image has a textarea positioned nicely next to it. The image may be of varying size, but I am going to force the image to be 450px high, and then have its width adjust automatically using CSS. I would like the textarea to fill the remaining space. I do not know the width of the image and I don't want to calculate it, I want the solution to be entirely CSS.

我正在尝试做一个布局,其中一个图像有一个文本区域在它旁边。图像可能大小不一,但我将强迫图像达到450px高,然后让它的宽度自动调整使用CSS。我希望文本区域填满剩余的空间。我不知道图像的宽度,我不想计算它,我想要的是完全CSS的解决方案。

Can anybody in Stack Overflow heed my call?

有人能在Stack Overflow听我的电话吗?

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

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

I have tried using floats, but the closest solution came using a table.

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

HTML (just text):

HTML(文本):

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

Just text, looks great!

The pink cell (which contains the text) sizes itself so it is wide enough to fill up the remaining space next to the image.

粉色单元(包含文本)本身大小,因此它足够大,可以填充图像旁边的剩余空间。

Now if I replace the text with a textarea, it doesn't look so pretty any more.

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

HTML (with textarea`):

HTML(与文本区域):

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

with a textarea - what happened?

The purple cell (which contains the image) now grows unnecessarily big.

紫色单元格(包含图像)现在变得不必要的大。

This is my CSS:

这是我的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;
}

I have tried wrapping the textarea in a div with display:block - no luck. I've tried position:absolute and playing with display.

我试过用一个div标签来包装文本区域:块——没有运气。我已经尝试过了:绝对的和玩的显示。

More details available at the fiddle: http://jsfiddle.net/vo03yzzy/

更详细的信息请参见:http://jsfiddle.net/vo03yzzy/。

Help me Stack Overflow, you're my only hope!

帮我叠满溢出,你是我唯一的希望!

2 个解决方案

#1


0  

If you want to retain the table layout, you can assign a width of 100% to the .left-cell, which will force the table to adjust the table cell widths such that the image cell has a shrink-to-fit width and the remaining width is allocated to the left cell (the 100% is more of a max then a specific width).

如果你想保留表格布局,您可以指定一个.left-cell宽度的100%,这将迫使表调整单元格宽度,这样图像细胞有shrink-to-fit宽度和剩余的宽度是分配给左细胞(max的100%更特定的宽度)。

The advantage of the table layout is that the textarea cell will take on the same height as the cell containing the image, which may be desirable for certain layouts, depending on your design requirements.

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

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

#2


0  

The heavy, heavy use of tables should really be avoided if possible. Maintenance, usability, not to mention the semantic issues should set warning bells off in your head that say "don't do this! don't do this!" :-)

如果可能的话,应该尽量避免使用大量的桌子。维护,可用性,更不用说语义问题应该在你的头脑中设置警告,说“不要这样做!”不要这样做!”:-)

How about something like this? http://jsfiddle.net/1twng6L3/1/

这样怎么样?http://jsfiddle.net/1twng6L3/1/

Nothing too edgy like flexbox but does take some box-sizing into play to add some padding in.

没有什么比flexbox更像的了,但确实需要一些盒子大小的游戏来增加一些填充。

Simple rules. Simple HTML.

简单的规则。简单的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;    
}

You might also consider the bandwidth of serving the full resolution image. I'm sure you'll take a different approach in your production code, it's wise to be careful about the bandwidth we're consuming with assets like that. Might kill any mobile or data-tied users. (Just a thought)

您还可以考虑服务完整分辨率图像的带宽。我相信在你的生产代码中,你会采取不同的方法,小心使用这些资产的带宽是明智的。可能会杀死任何移动或数据绑定的用户。(只是一个想法)

智能推荐

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2015/03/04/720310b4717999ec24cf7b6e2a9fef99.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告