Question

我无法将DIV放在DIV中的桌子旁边。我已经将DIV的样式和一个表格设置为内联块和内联相应的内联，但是会发生的是DIV放在表格的底部而不是表格的中心级别（目标是在＆＃之间对齐） 34; 6＆＃34;和＆＃34; 24＆＃34;）。要求是使用响应格式。

这是我在JSFiddle中编写的代码。

<div class="Dboxes" style="color:white;">
<span class="Title"> Title </span><br>
<span class="Value" style="display:inline-block; background:orange;"> <img id="PPMain" class="MainImg" src="img/grnsqr.png" /> ## </span>

<table style="display: inline-block; background:green;">
    <tr>
        <td>2</td>
        <td>
            <img id="PPVal2" class="ValImg" src="img/grnsqr.png">xx</td>
    </tr>
    <tr>
        <td>6</td>
        <td>
            <img id="PPVal6" class="ValImg" src="img/grnsqr.png">yy</td>
    </tr>
    <tr>
        <td>24</td>
        <td>
            <img id="PPVal24" class="ValImg" src="img/grnsqr.png">zz</td>
    </tr>
    <tr>
        <td>##</td>
        <td>
            <img id="PPVal##" class="ValImg" src="img/grnsqr.png">aa</td>
    </tr>
</table>

</div>

非常感谢帮助，非常感谢

此外，链接就在这里https://jsfiddle.net/k3388j0w/1/

Answer 1

您可能必须使用div将内容分成两列，浮动它们然后使用填充将内容移动到您喜欢的位置。

喜欢这个https://jsfiddle.net/d5u712hv/

div.col {
    width: 45%;
    float: left;
}

div.col.first {
    width: 70px;
    padding-top: 40px;
}
<div class="col first">
    <span class="Title"> Title </span><br>
    <span class="Value" style="display:inline-block; background:orange;"> <img id="PPMain" class="MainImg" src="img/grnsqr.png" /> ## </span>
</div>

<div class="col">
    <table style="display: inline-block; background:green;">
    <tr>
        <td>2</td>
        <td>
            <img id="PPVal2" class="ValImg" src="img/grnsqr.png">xx</td>
    </tr>
    <tr>
        <td>6</td>
        <td>
            <img id="PPVal6" class="ValImg" src="img/grnsqr.png">yy</td>
    </tr>
    <tr>
        <td>24</td>
        <td>
            <img id="PPVal24" class="ValImg" src="img/grnsqr.png">zz</td>
    </tr>
    <tr>
        <td>##</td>
        <td>
            <img id="PPVal##" class="ValImg" src="img/grnsqr.png">aa</td>
    </tr>
</table>
</div>

Answer 2

这会回答你的问题吗？

http://codepen.io/mwvanmeurs/pen/GpwMZr

顺便说一下，将table设置为display: inline-block可能是一个坏主意。

.container {
  display: flex;
  align-items: center;
}
    <div class="container">
<table style="display: inline-block; background:green;">
    <tr>
        <td>2</td>
        <td>
            <img id="PPVal2" class="ValImg" src="img/grnsqr.png">xx</td>
    </tr>
    <tr>
        <td>6</td>
        <td>
            <img id="PPVal6" class="ValImg" src="img/grnsqr.png">yy</td>
    </tr>
    <tr>
        <td>24</td>
        <td>
            <img id="PPVal24" class="ValImg" src="img/grnsqr.png">zz</td>
    </tr>
    <tr>
        <td>##</td>
        <td>
            <img id="PPVal##" class="ValImg" src="img/grnsqr.png">aa</td>
    </tr>
</table>
  <div class="other-div">
    <h1>Hey There!</h1>
  </div>
</div>

Answer 3

将第3行更改为以下内容： <div class="Value" style="display:inline-block; background:orange; vertical-align:middle">

并将第5行更改为以下内容： <table style="display: inline-block; background:green; vertical-align:middle">

瞧，瞧！：）

https://jsfiddle.net/k3388j0w/1/

Answer 4

您可以尝试将两个对象嵌套在外部表中，并删除这样的边框（我还使内部表有一个类，并在CSS中表示该类代替原始的“表”CSS）：

.Outer
{
   border-collapse:collapse;
} 

.Outer td {
     border: none;
    outline: none;
}

JSFiddle

桌子旁边的垂直中心DIV

4 个答案: