当前位置：文江博客话题详情

如何让浮动div填满空间

发布于 2024-07-08 22:20:05 字数 594 浏览 5 评论 0原文

我正在尝试在网页上创建一个“工作流程”栏。

工作流程中的项目可能具有不同的长度。

可能有足够的项目来填充屏幕的宽度，因此流程需要换行到下一行。

我使用左浮动 div 来执行此操作。

但是，我希望 div 占据适当的屏幕宽度。

如果一行只能容纳三个项目，那么我希望这些项目均匀地适合该行，同时考虑到每个项目的宽度。

目前我所能得到的就是一行中的最后一个 div 来填充剩余空间，这通常意味着我的项目全部左对齐，例如我可以获得这样的布局：

AAAA -> BBBBB ->
CCCCCCCCCCCCCCCCCCC -> DD -> EEE ->
FFFFF -> GGGG -> HHHHH

但我实际上希望它看起来像这个：

      AAAA   ->   BBBBB  ->
CCCCCCCCCCCCCCCCCCC  -> DD -> EEE ->
   FFFFF ->  GGGG ->  HHHHH

如果你明白我的意思。

我需要使用表格而不是浮动 div 吗？

原文

I'm trying to create a "workflow" bar on a web page.

The items in the workflow might be of different lengths.

There might be enough items to fill the width of the screen, hence the flow needs to wrap onto the next line.

I'm using left floating divs to do this.

However, I'd like the divs to take an appropriate amount of screen width.

If only three items can fit on one line, then I'd like those items to fit evenly on the line, taking into account each individual items width.

All I can get at the moment is for the final div on a line to fill up the remaining space, which often means my items are all left aligned, e.g. I can get a layout like this:

AAAA -> BBBBB ->
CCCCCCCCCCCCCCCCCCC -> DD -> EEE ->
FFFFF -> GGGG -> HHHHH

but I actually want it to look something like this:

      AAAA   ->   BBBBB  ->
CCCCCCCCCCCCCCCCCCC  -> DD -> EEE ->
   FFFFF ->  GGGG ->  HHHHH

if you see what I mean.

Do I need to use tables for this rather than floating divs?

分享到QQ

分享到微博

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

发布评论

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

小…楫夜泊 2024-07-15 22:20:06

可能可以通过查看周围的标记来了解您拥有哪些元素。您可以尝试使用 margin: 0 auto; 来设置一个周围的 div，

您可能需要为每个级别提供一个周围的 div。

回复收藏 0 原文

寻找一个思念的角度 2024-07-15 22:20:06

不要浪费时间，只需转到这里：

http://www.cssmenubuilder.com/build-面包屑菜单

回复收藏 0 原文

很酷又爱笑 2024-07-15 22:20:06

感谢您的及时回复。我会尝试一下你的建议。

我目前正在尝试使用列表来做到这一点，尽管我对 div 也一无所获。

我尝试提取 JSP 的一些 HTML 来尝试演示我的进展情况。

跨度有一类“导航”，它基本上在文本周围绘制背景图像，使其看起来像一个按钮，以及设置边距/填充等。我省略了与按钮绘制直接相关的 CSS，因为这是我们系统中绘制按钮的标准框架内容。我已经包含了我正在使用的 CSS，它与工作流程直接相关。

我试图在第一个按钮之前绘制起始图像，然后在每个按钮后面绘制背景图像，以便在每个按钮之间绘制一条线来表示流程。然后我在流程结束时得到了一个结束图像。

<html>
<body>

<STYLE>
#nav, #nav ul {
    list-style: none;
    margin: 0px;
    width: 700px;
}

#nav li {
    list-style: none;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    width: auto;
    background-image: url(/lookandfeel/images/navMenuDiv.gif);
    background-repeat: repeat-x;
}

li#ending {
    background-image: url(/lookandfeel/images/navMenuRight.gif);
    background-repeat: no-repeat;
}

li#start {
    background-image: url(/lookandfeel/images/navMenuLeft.gif);
    background-repeat: no-repeat;
}

.navigation a {
  background-image: url(/pdr/images/navigation.gif);
}
</STYLE>

<ul id="nav" style="width: 100%;border: 1px solid">
  <li id="start" />
  <LI >
    <SPAN class="navigation" >AAAAAAAAAA</SPAN>
  </li>
  <LI >
     <SPAN class=navigation >BBBB</SPAN>
  </li>
  <LI >
    <SPAN class=navigation>CCCCCCCCCCCCCCCCC</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>DDDDDDDDD</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>EEEEEEEE</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>FFFFFFFFFFFFFF</SPAN>
  </li>
  <li>
    <SPAN class=navigation>GGGGGGGGGGGGGGGGGGGGGGGGGGGGG</SPAN
  </LI>
  <li id="ending" />
  </ul>
</body>
</html>

Thanks for the prompt responses. I'll try out what you are suggesting.

I'm currently trying to do this using a list, although I also got nowhere with divs.

I've tried pulling some HTML of my JSPs in order to try and demonstrate where I'm up to with this.

The spans have a class of "navigation" which basically draws a background image around the text to make it look like a button, as well as setting margins/paddings/etc. I've omitted the CSS which is directly related to the button drawing, since this is standard framework stuff in our system to draw a button. I have included the CSS which I'm using which is directly related to the workflow.

I'm trying to draw a starting image before the first button and then draw background images behind each button in order to draw a line between each button to represent the flow. I've then got an ending image at the end of the flow.

<html>
<body>

<STYLE>
#nav, #nav ul {
    list-style: none;
    margin: 0px;
    width: 700px;
}

#nav li {
    list-style: none;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    width: auto;
    background-image: url(/lookandfeel/images/navMenuDiv.gif);
    background-repeat: repeat-x;
}

li#ending {
    background-image: url(/lookandfeel/images/navMenuRight.gif);
    background-repeat: no-repeat;
}

li#start {
    background-image: url(/lookandfeel/images/navMenuLeft.gif);
    background-repeat: no-repeat;
}

.navigation a {
  background-image: url(/pdr/images/navigation.gif);
}
</STYLE>

<ul id="nav" style="width: 100%;border: 1px solid">
  <li id="start" />
  <LI >
    <SPAN class="navigation" >AAAAAAAAAA</SPAN>
  </li>
  <LI >
     <SPAN class=navigation >BBBB</SPAN>
  </li>
  <LI >
    <SPAN class=navigation>CCCCCCCCCCCCCCCCC</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>DDDDDDDDD</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>EEEEEEEE</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>FFFFFFFFFFFFFF</SPAN>
  </li>
  <li>
    <SPAN class=navigation>GGGGGGGGGGGGGGGGGGGGGGGGGGGGG</SPAN
  </LI>
  <li id="ending" />
  </ul>
</body>
</html>

回复收藏 0 原文