使用HTML和CSS佈局一張小桌子

我很喜歡HTML和CSS，並且還沒有「知道」它是如何工作的。我想實現一個由兩行組成的表，其中第一行只有一列，並跨越第二行的兩列。使用HTML和CSS佈局一張小桌子

在第一行中我有一個輸入框，我希望該行符合此輸入框的高度。在左下方，我有一個具有自己樣式的按鈕，我希望行（和單元格）符合按鈕的大小。在右下角我有一個圖像，我希望圖像可以按比例縮放（保持其寬高比），以便填充行的高度（並浮動到右側）或垂直放置單元格和中心的寬度。

該表將水平填充其容器（一個div）。

任何人都可以給我提示嗎？

我不一定需要一個表格元素，只是在沒有必要指定像素大小以保持一切可擴展性的情況下達到效果。

這是我現在有（一些垃圾可能仍然在那裏...）：

table { 
 
    display: table; 
 
    table-layout: auto; 
 
    width: 100%; 
 
} 
 

 
tr { 
 
    display: table-row; 
 
    width: auto; 
 
    clear: both; 
 
} 
 

 
input { 
 
    font-size: 16px; 
 
} 
 

 
input[name="text"] { 
 
    line-height:1.875; 
 
    display:table-cell; 
 
    width:100%; 
 
} 
 

 
input[type="submit"] { 
 
    border: 0; 
 
    border-radius: 0; 
 
    background: #d7b221; 
 
    box-shadow: none; 
 
    color: white; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    line-height: 1; 
 
    padding: 1.4em 1.6em 1.2em; 
 
} 
 

 
img { 
 
    width: auto; 
 
    height: 52px; 
 
} 
 

 
a { 
 
    display: block; 
 
    float: right; 
 
}

<form> 
 
<table> 
 
<tr> 
 
<td colspan="2"> 
 
<input name="text" placeholder="Enter some text here"/> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td><input type="submit" value="Click Here"/></td> 
 
<td><a href="x"><img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/car.svg"/></a></td> 
 
</tr> 
 
</table> 
 
</form>

我猜想它最終歸結爲：

#container { 
    border:1px solid red; 
} 

#main_img { 
    height: 30px; 
    width: 30px; 
} 

#dep_img { 
    max-width: 100%; 
    max-height: 100%; 
} 

<div id="container"> 
    <img id="main_img" src="http://i.stack.imgur.com/xkF9Q.jpg"> 
    <img id="dep_img" src="http://i.stack.imgur.com/xkF9Q.jpg"> 
</div>

有沒有什麼方式可以讓主圖像的大小（高度）決定圖像大小（高度）？

來源

2017-03-31 racanu

Bootstrap！ http://getbootstrap.com/ –

請發佈您迄今爲止的代碼，以便我們可以查看。 – sn3ll

關於尺寸，這很容易：不指定任何。默認情況下，塊元素與其內容的高度變成相同的大小，因此需要照顧。 –

爲什麼在第一時間使用表格進行佈局時，只需使用CSS即可完成所有工作。從此網站學習CSS：http://learnlayout.com/

來源

2017-03-31 17:46:56

我會給它閱讀。謝謝。我不是很流利的CSS，雖然我知道它可以做很多我想念的經驗。我只是想用我所知道的做一些事情。 – racanu

該網站是否有可用於非表的「colspan」的替代方案？ –

恐怕我不明白這個問題:) – racanu

使用HTML和CSS佈局一張小桌子

回答

相關問題