html - 如何在 Html 中使用内联 block 显示表格和图像?

标签 html css layout

如何在同一层显示我的图像和表格?这真的让我很沮丧,因为我无法让“inline-block”工作。 :(

<p id="play">
    hey
</p>
<div id="menu">
    <table>
        <tr>
            <td>Models</td>
        </tr>
        <tr>
            <td>Cars</td>
        </tr>
        <tr>
            <td>Modern Houses</td>
        </tr>
        <tr>
            <td>Vacation Spots</td>
        </tr>
        <tr>
            <td>Sports and Outdoors</td>
        </tr>
        <tr>
            <td>Books</td>
        </tr>
        <tr>
            <td>Abandoned Houses</td>
        </tr>
        <tr>
            <td>Summer Wear</td>
        </tr>
        <tr>
            <td>Makeups</td>
        </tr>
        <tr>
            <td id="site">Site Info</td>
        </tr>
    </table>
</div>
<img src="C:\Users\Elexie\Documents\Downloads\faki2.jpg"/>


body {
    background: #181818;
    margin: 0;
    padding: 0;
}

/* set body display to inline-table*/
#play {
    background: black;
    color: white;
    margin: 0;
    padding: 0;
    height: 35px;
}

table,td {
    color: white;
    border: 1px solid white;
    border-collapse: collapse;
    width: 160px;
    padding: 10px;
    font-family: ;
}

table {

}

#site {
    height: 350px;
}

img {
    float: right;
}

我换了图,大小差不多 http://jsfiddle.net/w6d5g/

最佳答案

在你的 CSS 代码中:

table{
float:left;
}

应该可以解决问题。

阅读更多:http://www.w3schools.com/css/css_float.asp

关于html - 如何在 Html 中使用内联 block 显示表格和图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25071034/

相关文章:

javascript - 当它的文字更长然后越过边界

android - 如何响应 Dialog 中的方向变化

javascript - FadeOut 伪元素

html - 为什么第 n 个 child 选择器不起作用?

c# - 如何将 System.Windows.Control WebBrowser.Document 转换为 mshtml.MSHTMLDocumentClass?

javascript - 按钮不适用于移动设备,但适用于 PC Bootstrap

jquery - 使用 HTML 和 CSS 的半砖图像布局

android - 使用两个 TextView 进行布局

php - PHP不输出视频的原因可能是什么?

javascript - jQuery 代码不再适用于 v1.8.3