在圖片旁邊的表格內的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)

您還可以考慮服務完整分辨率圖像的帶寬。我相信在你的生產代碼中,你會采取不同的方法,小心使用這些資產的帶寬是明智的。可能會殺死任何移動或數據綁定的用戶。(只是一個想法)


注意!

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



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