css 将 div 与 at 右侧 100% 的表格对齐答案

【问题标题】：css align div right with at table at 100% on rightcss 将 div 与 at 右侧 100% 的表格对齐
【发布时间】：2012-08-13 06:57:35
【问题描述】：

我有一个设置为 100% 宽度的表格。我有时会添加一个带有 php 广告的随机 div。我希望广告 div 位于右侧和表格的内容中。我希望表格位于左侧，但仍处于 100% 左右，它将填满广告 div 左侧的所有空间。

简而言之，当 div 不存在时，表格将填充 100% 宽度。当 div 存在时，div 将位于表格的右侧，设置宽度为 300 像素。

这是 div 的样式

.ContentAds {
    float: right;
    height: 100%;
    width: 300px;
    display: block;
    clear: none;
}

表格不是 div 而是简单地设置为 100% 宽度。

<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
  <tr>
    <td><p class="Title">Title</p>
    <p>This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content. This is the content.. </p></td>
  </tr>
</table>

【问题讨论】：

I want the ad div to be on the right and the content of the table. 是什么意思？还有你到底想要什么：table to be on the left but still at 100% 或 div 为at a set width of 300px
如果 div 不存在，表格将是 100%。如果它存在，那么它将在 300px 的左侧，并且表格内容将在 div 的左侧，但会填满整个空间。有意义吗？
如果表格将拉伸到 100% 宽度并且与 div 具有相同的父级，那么 div 将没有位置，因为父级的宽度是 100%，而您想要 100% + 300px。但我确信有一些解决方案你只需要澄清你的任务
正确。那一刻我的意思是100％是填充页面的左侧......所有这些。所以也许还有 70% 的空间，但我希望表格填满左边 100% 的空间。
显示一些 php.ini 文件。您需要动态切换表的 css-class 或者可能是 id。因此，当您发送给客户端 html 时，没有 div 表格将有 100% 的宽度，而当您使用 div 时，您将提供另一种样式

标签： css html css-float alignment

【解决方案1】：

目前我只能建议用定位的 div 包裹您的表格。但我不能确定这对你是否足够，因为你提供了相当少量的代码 jsfiddle

<div class="ad">
    advertise... advertise
    advertise... advertise
    advertise... advertise
</div>
<div class="table_wr">
    <table>
        <tr>
            <td>
                <p class="Title">Title</p>
                <p>
                    This is the content. This is the content.
                    This is the content. This is the content.
                    This is the content. This is the content.
                    This is the content. This is the content..
                </p>
            </td>
        </tr>
    </table>
</div>

CSS

body {
    position: relative;
}
table {
    border: 1px solid black;
    width: 100%;
}
.ad {
    float:right;
    width:300px;
    height: 500px;
    background-color: #a2e89f;
}
.table_wr {
    position: absolute;
    left: 0;
    right: 300px;
}

为表格设置了边框，以便您可以看到表格的延伸位置

【讨论】：

【解决方案2】：

我认为这是行不通的，除非您在另一个 DIV 存在时为表格设置较小的宽度，然后您也可以将其浮动到左侧。

也许您可以将表格设置为 100%，然后当另一个 DIV 存在时，您可以在表格上添加一个类来调整宽度并使其浮动？

【讨论】：