使一个 div 居中，而另一个 div 向右浮动？

发布于 2024-10-10 00:53:56 字数 372 浏览 0 评论 0原文

这是我的示例：

<div id="mainContainer">
     <div id="itemIWantToCenter"></div>
     <div id="itemIwantFloatedRight"></div>
</div>

mainContainerwidth 宽度设置为 100%。 itemIwantFloatedRight 宽度设置为 300px。假设 itemIWantToCenter 的宽度为 200px。我如何将该 div 居中，同时将另一个 div 浮动在容器内？谢谢！

原文

Here is my example:

<div id="mainContainer">
     <div id="itemIWantToCenter"></div>
     <div id="itemIwantFloatedRight"></div>
</div>

The mainContainerwidth width is set to 100%. The itemIwantFloatedRight width is set to 300px. Let's say that the itemIWantToCenter has a width of 200px. How would I center that div while floating the other within the container? Thanks!

分享到QQ

分享到微博

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

发布评论

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

迟月 2024-10-17 00:53:56

希望这有帮助：

<div id="mainContainer">
    <div id="itemIWantToCenter" style="float: right;"></div>
    <div id="itemIwantFloatedRight" style="margin-left: 50%;"></div>
</div>

Hope this helps:

<div id="mainContainer">
    <div id="itemIWantToCenter" style="float: right;"></div>
    <div id="itemIwantFloatedRight" style="margin-left: 50%;"></div>
</div>

回复收藏 0 原文

梦初启 2024-10-17 00:53:56

这是我的解决方案的 fiddle ，代码如下（固定链接）

该解决方案的优点是当父容器的大小发生变化时，内容容器将扩展，同时保留其边距，并且右侧边栏将始终保持在右侧。

希望这有帮助。

注意在小提琴中，content 容器有点薄。这是由于窗口的大小造成的。更改窗口的大小{将鼠标悬停在分隔线上，单击并拖动}，以查看好处。

<div class="container">
    <div class="content">
        centered content
    </div>
    <div class="right">
        right
    <div>
</div>

.container {
    width:100%;
    position:relative;
}

.container .content {
    width:auto;
    margin:0 200px;
    background:green;
}

.container .right {
    width:200px;
    position:absolute;
    top:0px;
    right:0px;   
    background:#f00;
}

.content, .right {
    height:300px   
}

Here's a fiddle of my solution and the code is below (fixed link)

The advantages to this solution is that when the parent container's size changes, the content container will expand, while retaining it's margins and the right sidebar will always remain on the right.

Hope this helps.

Note In the fiddle, the content container is a little slim. This is due to the size of the window. Change the size of the window {hover over the dividers, click and drag}, to see the benefits.

<div class="container">
    <div class="content">
        centered content
    </div>
    <div class="right">
        right
    <div>
</div>

.container {
    width:100%;
    position:relative;
}

.container .content {
    width:auto;
    margin:0 200px;
    background:green;
}

.container .right {
    width:200px;
    position:absolute;
    top:0px;
    right:0px;   
    background:#f00;
}

.content, .right {
    height:300px   
}

回复收藏 0 原文

野味少女 2024-10-17 00:53:56

当然，您应该使用链接的样式表......

<div id="mainContainer" style="width:100%; border:solid 1px red;">
  <div id="itemIwantFloatedRight" style="width:300px; border:solid 1px green; float:right">
     right
  </div>
  <div id="itemIWantToCenter" style="width:200px; border:solid 1px blue; margin:0 auto;">
     center
  </div>
</div>

You should use a linked stylesheet ofcourse...

<div id="mainContainer" style="width:100%; border:solid 1px red;">
  <div id="itemIwantFloatedRight" style="width:300px; border:solid 1px green; float:right">
     right
  </div>
  <div id="itemIWantToCenter" style="width:200px; border:solid 1px blue; margin:0 auto;">
     center
  </div>
</div>

回复收藏 0 原文

~没有更多了~