Question

如何在同一级别显示我的图像和表格？这真让我感到沮丧，因为我不能让“内联块”工作。：（

<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/

Answer 1

在你的css代码中：

table{
float:left;
}

应该做的伎俩。

了解详情：http://www.w3schools.com/css/css_float.asp

Answer 2

检查这个小提琴：http://jsfiddle.net/Mohamed_nabil/F8MKp/

/*******Added style******/
img
{
    /*165px is your Menu width with borders*/
    max-width: calc(100% - 165px);
    /*For cross browser*/
    -webkit-max-width: calc(100% - 165px);
    -moz-max-width: calc(100% - 165px);
    -o-max-width: calc(100% - 165px);
    -ms-max-width: calc(100% - 165px);
    display: inline-block;
    vertical-align: top;/* Can be middle, bottom */
}
#menu{
    display: inline-block;
}

Answer 3

首先，用div包装图像标记。将此div命名为您想要的任何内容我们将其命名为：＆＃34; image-test＆＃34;。

<div class="image-test">
  <img src="(URL for IMAGE)">
</div>

接下来，让我们说你希望你的桌子占据宽度的50％，你的图像占据另外50％。我们也将浮动这些div元素，因此它们不在文档的流程中。

#menu{
  float:left;
  width:50%;

}
.image-test{
  float:left;
  width:50%;
}

您会注意到您的图片大于包含的div，因此请在所有图片上设置最大宽度，以避免将来出现问题。

img {
  max-width:100%;
}

如何在Html中使用内联块显示表和图像？

3 个答案: