如何将标头推到容器的一部分旁边？

发布于 2024-11-29 16:14:45 字数 762 浏览 2 评论 0原文

我有一些 HTML：

<div id="thing">
  <div id="contentheader">
    <h3>Header</h3>
  </div>
  <div id="contentcontainer">
    <div id="image">
      <img alt="balt" src="imagesrc">
    </div>
    <div id="body">
      <p>hegl gegl</p>
    </div>
  </div>
</div>

我需要将“contentheader”中的 h3 向下推到“contentcontainer”中的图像旁边，同时让正文文本位于其旁边。除了图像之外，所有内容都是可变宽度的。

也许图像会更好地展示：

Is this possible with CSS?

如您所见，灰色对应于“thing”，绿色对应于“thing ”带有“contentcontainer”，蓝色带有“contentheader”。

编辑 HTML 将是一个很大的麻烦。除了图像固定宽度之外，我也无法制作任何其他内容。只用 CSS 可以做到吗？（如果能够用浮动和其他东西来做到这一点那就太棒了，但我不知道它是否可行）

原文

I've got some HTML:

<div id="thing">
  <div id="contentheader">
    <h3>Header</h3>
  </div>
  <div id="contentcontainer">
    <div id="image">
      <img alt="balt" src="imagesrc">
    </div>
    <div id="body">
      <p>hegl gegl</p>
    </div>
  </div>
</div>

I need to push the h3 in 'contentheader' down alongside the image in 'contentcontainer' while having the body text sit alongside it. Everything is of variable width save the image.

Perhaps an image will demonstrate better:

Is this possible with CSS?

As you can see, grey corresponds with 'thing', green with 'contentcontainer' and blue with 'contentheader'.

Editing the HTML would be a major hassle. I also can't make anything other than the image fixed-width. Is it possible to do it with just CSS? (It'd be awesome to be able to do it with floats and stuff but I don't know if it's doable)

分享到QQ

分享到微博

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

发布评论

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

路还长，别太狂 2024-12-06 16:14:45

我认为您不会用 CSS 找到完美的解决方案。您可以使用定位，但如果您的标题很长且超过一行，则可能会遇到问题。

如果您愿意使用 JavaScript，则以下非框架代码片段可以使用。

// Add the header inside the container div just before the body
containerDiv = document.getElementById('contentcontainer');
headerDiv = document.getElementById('contentheader');
bodyDiv = document.getElementById('body');
containerDiv.insertBefore(headerDiv, bodyDiv);

您可以使用 jQuery 或其他 JavaScript 框架将此代码重新创建为更简洁的单行代码。

I don't think you're going to find a perfect solution with CSS. You could use positioning but you would probably run into issues if you had a long title that ran more than one line.

If you're open to using javascript the following non-framework snippet would work.

// Add the header inside the container div just before the body
containerDiv = document.getElementById('contentcontainer');
headerDiv = document.getElementById('contentheader');
bodyDiv = document.getElementById('body');
containerDiv.insertBefore(headerDiv, bodyDiv);

You could recreate this code as a neater, one-liner using jQuery or another javascript framework.

回复收藏 0 原文

情深已缘浅 2024-12-06 16:14:45

当然，这是基本设置的 Css：

http://jsfiddle.net/Nkapr/

询问您是否有任何问题。

回复收藏 0 原文

音盲 2024-12-06 16:14:45

这里的问题是 HTML 结构，它的编写并没有真正考虑到您的目标（这真是太糟糕了！）

如果您所追求的只是将 H3 容器“contentheader”向下推，使其与“”中的其余内容保持一致您可以在“contentcontainer”上设置负上边距以将其向上拉，然后为“contentcontainer”中需要向下的元素添加正上边距（在本例中为“image”）给人的印象是 h3 部分实际上与其余内容位于同一位置。这有点像黑客，但如果您无法更改 HTML，它可能会起作用。

回复收藏 0 原文