将元素定位到块元素的右侧

发布于 2024-12-21 18:01:24 字数 183 浏览 0 评论 0原文

有没有办法使用 CSS 将元素（块或内联）定位到块元素的右侧，而不更改块元素或包含元素的 CSS？

<div>Block</div>
<span class="someCSS">Inline</span>

结果：

块内联

原文

Is there a way using CSS to position an element (block or inline) to the right of a block element without changing the CSS of the block element or of the containing element?

<div>Block</div>
<span class="someCSS">Inline</span>

Result:

BlockInline

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦开始←不甜 2024-12-28 18:01:24

没有更多信息，我唯一可以建议的是：

element {
  display: block;
  float: right;
}

Without any more information, the only thing I can suggest is this:

element {
  display: block;
  float: right;
}

回复收藏 0 原文

对风讲故事 2024-12-28 18:01:24

我更倾向于建议您这样做：

div { float: left; }

预览： http://jsfiddle.net/Wexcode/9DCDN/< /a>

I would be more inclined to suggest that you do:

div { float: left; }

Preview: http://jsfiddle.net/Wexcode/9DCDN/

回复收藏 0 原文

乜一 2024-12-28 18:01:24

老实说，我花了一段时间才明白你想要什么，但我想我现在明白了。当您说内联元素是动态的时，您可能也使用动态语言，因此您可以只使用一些条件语句向内联对象添加一些 css 样式。

根据您的项目，另一种选择可能只是将跨度包含到块元素中。还有一种方法是将整个内容包装成另外两个块元素，这样就可以避免对其他后续元素产生 floating 效果。

<div style="float:left">
    <div>BLOCK</div>
</div>
<div style="float:right">
    <span>INLINE</span>
</div>

抱歉，内联CSS。如果您可以的话，如果将内联设置为 display:block，您会得到相同的效果。或者避免对以下元素产生 floating 效果的另一种选择：在所有内容之后使用类似

的内容。

但大多数人不知道的是，CSS 已经有了自己的“条件语句”，但在 CSS 4 之前，无法直接选择祖先。但据我所知，没有其他方法可以以任何其他方式实现预期结果。

Well honestly it took me a while till I understood what you wanted, but I think I do now. When you say the inline element is dynamic, you probably use a dynamic language as well, so you could just use some conditional statements to add some css-styling to the inline object.

Another option, depending on your project, might be just to include the span into the block element. And one more would be to wrap the whole thing into two more block elements, so you avoid having a floating effect to other following elements.

<div style="float:left">
    <div>BLOCK</div>
</div>
<div style="float:right">
    <span>INLINE</span>
</div>

Sorry for the inline-css. You got the same effect if you set the inline to display:block if that's possible for you. Or another option to avoid having a floating effect to following elements: Use something like <div style="clear:both"></div> after everything.

What most people don't know though is that CSS has it's own "conditional statements" already, but up to CSS 4 it won't be possible to select an ancestor directly. But there's no other way (as far as I know) to achieve the wished outcome any other way.

回复收藏 0 原文

~没有更多了~