Question

我已经拍了一张照片来表示： alt text

如图所示，div [{1}}和div left_bg之间存在差距。 middle_bg没有内容，其宽度应该是流畅的，并且适合其div容器left_bg。为了帮助证明我的差距，我将top-container设置为left_bg。但请注意，宽度应该是流动的。 div [{1}}也将是流畅的，因为它允许更长或更短的不同文本。

如何摆脱这种差距并允许width:500px适合？

更新

我在想，也许像表一样使用CSS可以实现我的目标。我试过调整和搞乱，但我无法让它工作。我已设置middle_bg来帮助解决此问题。

Answer 1

使用表格是最好的方法

<table cellspacing="0" cellpadding="0" style="width: 100%; padding: 0pt; margin: 0pt;">
    <tbody>
        <tr align="top">
            <td style="width: 100%; height: 85px;">
                <div class="left_bg">
                </div>
            </td>
            <td style="">
                <div class="middle_bg">
                    <p>
                        Michicraft Boats</p>
                </div>
            </td>
            <td>
                <div class="right_bg">
                </div>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <div id="top-container-links">
                    <a href="#">Find Nearest Dealer</a> | &nbsp;<a href="#">Request a Quote</a></div>
            </td>
            <td>
            </td>
        </tr>
    </tbody>
</table>

并将您的CSS更改为

#top-container .left_bg
    {
        background: none repeat scroll 0 0 #A3AFC6;
        border-color: white -moz-use-text-color white white;
        border-style: solid none solid solid;
        border-width: 1px 0 1px 1px;
        height: 85px;
        width: 100%;
        -webkit-border-radius: 20px 0 0 20px;
        -moz-border-radius: 20px 0 0 20px;
        border-radius: 20px 0 0 20px;
        behavior: url(/PIE/PIE.htc);
    }
    #top-container .middle_bg
    {
        background: none repeat scroll 0 0 #A3AFC6;
        border-top: 1px solid white;
        float: right;
        height: 44px;
        margin-top: -42px;
        text-align: center;
        white-space: nowrap;
    }

Answer 2

#top-container .middle_bg {
    width: 263px;
}

由于#top-container为775px，.left_bg为500，左边距为1，.righ_bg为10px，右边距为1.

Answer 3

通过将#top-container .left_bg的宽度设置为 514px ，让它坚持到右边。

编辑：

将#top-container .middle_bg p更改为绝对定位：

position:absolute;
right:2px;
bottom:0px;

并添加到#top-container

position:relative;

也将#top-container .left_bg宽度保持为 514px 。

Answer 4

如果将其宽度设置为514px，则会触及蓝色。如果你想让它一直向右转，那就改变#top-container .left_bg

到

的位置是：绝对的; 宽度：773px;

Answer 5

通常通过将div设置为width: 100%并将元素本身及其右侧的元素浮动来完成。

Answer 6

我认为你的导航区域布局过于复杂。我试过这个：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title></title>
    <style type="text/css">
      body, html {
        background-color: #949dad;
        padding: 0;
      } 
      p {
        margin: 0; 
        padding: 0;
      }
      .brand {
        color:#FFFFFF;
        background-color: #949DAD;
        -moz-border-radius:10px 10px 0 0;
        border:1px solid white;
        border-bottom-style: none;
        font-family:Georgia,"Times New Roman",Times,serif;
        font-size:31px;
        margin:44px 0 0 0;
        min-width:215px;
        padding:5px 10px 0;
        position:relative;
        float: right;
        height: 36px;
        overflow: visible;
      }

      .brand_container {
        font-size:12px;
        background-color:#A3AFC6;
        border: 1px solid white;
        height:85px;
        text-align:center;
        -moz-border-radius:20px 0 0 20px;
        background:none repeat scroll 0 0 #A3AFC6;
        float:left;
        width:800px;
        padding:0px 5px;
        margin:0 0 20px 0;
      }

      .brand .links {
        width:100%;
        float:right;
        clear:both;
        margin-top:1px;
        font-size:11px; 
        font-family:Georgia, "Times New Roman", Times, serif;
        text-align:center; 
      }
      .brand .links a{color:#fff; text-decoration:none;}
      .brand .links a:hover{color:#fff; text-decoration:underline;}

      .body {
        margin-top: 105px;
        width:800px;
        padding:0px 5px;
        border: 1px solid white; 
        clear: both;
        background-color:#A3AFC6;
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">

    </script>
  </head>
  <body>
    <div class="brand_container">
      <div class="brand">
        <p>Michicraft Boats</p>
        <div class="links"><a href="#">Find Nearest Dealer</a> | &nbsp;<a href="#">Request a Quote</a></div>
      </div>
    </div>
    <div class="body"> Content here <br><br><br><br></div>
  </body>
</html>

如何使div一直向右扩展

6 个答案: