jquery'旁边的浮动元素；s标签不工作_Jquery_Html

jquery'旁边的浮动元素；s标签不工作

jquery html

jquery'旁边的浮动元素；s标签不工作,jquery,html,Jquery,Html,我有一个div浮动在jquery的选项卡的左侧这是浮动元素的css： #twitter{ width: 200px; height: 300px; border: 1px solid black; text-align: center; float: left; } 这是html结构： <body> <div id="header"> <img src="<? echo base_url();

我有一个div浮动在jquery的选项卡的左侧

这是浮动元素的css：

#twitter{
    width: 200px;
    height: 300px;
    border: 1px solid black;
    text-align: center;
    float: left;
}

这是html结构：

<body>
    <div id="header">
        <img src="<? echo base_url();?>image/header.jpg">
    </div>
    <div id="twitter"> 
        <h1>TWITER</h1>
    </div>
    <div id="tabs">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#about">About Me</a></li>
            <li><a href="#book">All About Love</a></li>
        </ul>
    <div id="home">
        <p><?php echo $home; ?></p>
    </div>
    <div id="gallery">
        <p><?php echo 'Gallery'; ?></p>
    </div>
    <div id="about">
        <?php echo $about; ?>
    </div>
    <div id="book"></div>
    </div>
</body>


图像/标题.jpg“>
推特

这是我从上面的代码中得到的：

我应该怎么做才能使div（

#twitter

）在选项卡外左浮动

编辑

这是在我将float:left添加到选项卡后发生的情况：

谢谢：D

如果您将选项卡（#选项卡）向左浮动，应该足够了。

如果您将选项卡（#选项卡）向左浮动左，这应该足够了。

让tab div也浮动：左请查看我更新的qusetion看起来像一个浮动下拉。所以可能是

#twitter

+的宽度

#tabs

超过了主体的宽度。您还没有提供所有CSS，所以很难说清楚。我已经将您提供的代码完全复制到了fidd中le here:…刚刚将

float:left

添加到

#tabs

中，布局就可以了。@Faust谢谢你的帮助。是的，当内容很小的时候它就可以工作了。我有一个相当大的内容，你有什么建议吗？如果我用%手动计算宽度如何？你可以在主体上放置一个等于或大于widt总和的最小宽度#twitter和#选项卡的hs（加上它们的边距、边框和填充）。如果浏览器视口的宽度小于此值，则根据主体的

溢出

属性，视口将提供水平滚动条（

溢出：自动

或

溢出：滚动

），或者选项卡将被视觉裁剪（

溢出：隐藏

）。或者，您可以将这些元素包装在一个div中，并将

最小宽度

应用于该元素，而不是主体。使选项卡div也浮动：left请查看我更新的qusetion看起来像一个浮动下拉列表。因此，

#twitter

+选项卡的宽度可能超过主体的宽度。您尚未提供所有内容CSS，所以很难说清楚。我已经把你提供的代码复制到了这里：……并在

选项卡中添加了浮动：left
，布局很好。@Faust谢谢你的帮助。是的，当内容很小的时候它就可以工作了。我有一个相当大的内容，你有什么建议吗？如果我算一下宽度，怎么样手动使用%？您可以在正文上放置一个最小宽度，该最小宽度等于或大于#twitter和#选项卡宽度之和（加上它们的边距、边框和填充）。如果浏览器视口的宽度小于此值，则根据正文的overflow
属性，任一视口都将提供一个水平滚动条（overflow:auto
或overflow:scroll
）或选项卡将被视觉裁剪（overflow:hidden
）。或者，您可以将这些元素包装在div中，并将min width
应用于该元素而不是主体。