css - 选择 td 内的 div

标签 css

如果我有情侣<div> s 在 <td> 内,我可以每一项都选择吗?

例如,我想让第一个向左浮动,第二个向右浮动。只使用 CSS 可以吗?

.divE:first-child { float:left; }
.divE:last-child  { float:right; }

HTML

<table id="myTbl" cellpadding="0" cellspacing="0">
    <tr>
        <td>
        <div class="red">asdasd</div>
        <div class="divE"></div>
        <div class="divE"></div>
        content
        </td>
    </tr>
</table>

最佳答案

是的:)

您可以将 .divE 类设置为默认向左浮动,然后您可以使用相邻同级选择器定义,当 divE 类的一个 div 紧跟在 divE 类的另一个 div 后面时,它应该向右浮动,就像这个:

.divE {
    float:left;
}

.divE + .divE {
    float: right !important;
}

但是给每个div一个id,然后为每个div设置 float 不是更容易吗?或者只是将 .floatRight 或 .floatLeft 类应用于 div,然后更改这些类的 float ?通过这种方式,您可以重用这些类。

如果您将 HTML 更改为:

<table id="myTbl" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="3" width="25%">
    <div class="red">asdasd</div>
    <div class="divE floatLeft"></div>
    <div class="divE floatRight"></div>
    content
    </td>
</tr>

并添加 CSS,如下所示:

.floatLeft {
float: left;
}

.floatRight {
float:right;
}

关于css - 选择 td 内的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10456387/

相关文章:

css - JQuery UI 对话框按钮未正确显示

css - 如何使用 hooks 覆盖 Material ui 样式

javascript - Bootstrap 工具提示具有白色背景

css - 请解释溢出:hidden 's effect on backgrounds?

asp.net - 正确对齐控件

html - 响应式网页设计中布局更改时 HTML 元素的切换顺序

html - 使用 flask/jinja 来容纳没有 HTML 表格的动态内容

javascript - 如果内容大于屏幕高度,弹出窗口始终显示为固定在顶部边缘但会随着整个页面滚动?

通用选择器和伪元素上的 CSS 过渡

jquery - 如果菜单关闭,子菜单的减号不会切换回加号