Question

我正在尝试创建一个greasemonkey用户脚本，我通过ajax请求将一个div添加到表中。该表重复此模式约700次：

<table id="table01" >
<tr class = "row0"> 
    <td rowspan = "2" >
        <img src = "url" >
    </td>
    <td> text1 </td>
    <td style = "text-align: right;" > text2 </td>
</tr>
<tr class = "row1">
    <td> text3 </td>
    <td style = "text-align: right;" > text4 </td>
</tr>

...
...
...

</table>

我无法设置插入div并设置css对齐使其看起来像在图像中： http://s24.postimg.org/wastsl5it/Sin_t_tulo.png 我怎么能用javascript或jquery来做呢？

提前致谢

Answer 1

请参阅此处的输出：

jsFiddle

我的解决方案是使用百分比。页面宽度为100％。当元素达到100％时，它会强制下一个元素环绕到下面的位置。并使用float，而不是text-align: right。我将所有内容设置为float:left，并设置width，以便元素将环绕到下一行。

<table id="table01" >
<tr class = "row0"> 
    <div style="width:20%; float:left; border: solid thin purple">
            <img src = "url" >
    </div>

    <div style="width:79%; float:left">
        <div style="width:49%; float:left; border: solid thin"> text1 </div>
        <div style = "width: 49%; float:left; border: solid thin red"> text2 </div>

        <div style="width: 98%; float:left; border: solid thin blue">Center</div>

        <div style = "width: 48%; float:left; border: solid thin green"> text3 </div>
        <div style = "width: 48%; float:left; border: solid thin orange"> text4 </div>
    </div>
</tr>

<tr class = "row0"> 
    <div style="width:20%; float:left">
            <img src = "url" >
    </div>

    <div style="width:80%; float:left">
        <div style="width:50%; float:left"> text1 </div>
        <div style = "width: 50%; float:left" > text2 </div>

        <div style="width: 100%">Center</div>

        <div style = "width: 50%; float:left"> text3 </div>
        <div style = "width: 50%; float:left"> text4 </div>
    </div>
</tr>

</table>

请注意，您遇到问题的<div>设置为100％的宽度。所以它将占用它的所有部分。此外，请注意设置为100％的<div> 不占据网页的100％。它占据了<div>内部的100％。这是你需要知道的另一件事。宽度相对于它们所在的元素。

添加边框后，您可以实际看到所有内容的布局，宽度需要更小，因为边框会占用空间。因此，添加边框的100％宽度超过100％。所以你必须将宽度改为更小的东西，可能是99％。

将多个元素对齐并格式化，动态添加到表行

1 个答案: