Question

http://i.imgur.com/37miZ.png这是截图

我试图设计它，使得h1将位于左侧，输入位于中间，然后我想在右侧显示一些链接。

我尝试使用浮动，它只会破坏一切。

修改

当我使用float：left或float：right时，我得到2个div来分开，但定位很糟糕。

我有一些HTML：

<div id="container">
            <div id="header">
                <div id="nytm">
                    <h1>New York Tech Map</h1>
                </div>
                <div id="form">
                    <form>
                        <input type="text" name="zip">
                        <input type="submit" value="Search By Zip">
                    </form>
                </div>
                <div id="navlinks">
                </div>
            </div>
</div>

这是css：

#container {
    min-height: 100%;
    position: relative;
}
#header {
    background: #EDEDED;
    height: 79px;
    border-bottom: 1px solid #666;  
}

#nytm{
    display: inline;
}

#form{
    margin-top: 24px;
    display: inline;
}

#navlinks{
    display: inline;
}

Answer 1

好的，请按照以下步骤操作：

在你的css文件中，放置这个clearfix样式的类：

    .clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
    .clearfix{display:inline-block;}
    html[xmlns] .clearfix{display:block;}
    * html .clearfix{height:1%;}

    .fr{float:right;display:inline-block;}
    .fl{float:left;display:inline-block;}

下一节你需要这个课程。

现在让我们在HTML部分看到我们需要的内容：

    <div class="clearfix container">
        <div class="fl search-zone">
            <!-- YOUR SEARCH INPUT AND BUTTON HERE -->
            <input type="text" /> <button>SEARCH</button>
        </div>
        <div class="fr links">
            <!-- YOUR LINKS HERE -->
            <a href="">LINK 1</a> <a href="">LINK 2</a> <a href="">LINK 3</a>
        </div>
    </div>

clearfix类将帮助您在其中放置任何浮动元素，它是一个跨浏览器的解决方案。 *强烈建议您向search-zone和links提供width以防止IE出现问题。

希望这就是你要找的。

Answer 2

在这里查看，为什么在使用浮动时它们的定位很糟糕。我调整css并查看输出

http://jsfiddle.net/Bq9eq/

Answer 3

我认为你的意思是三个你想要标题上的列。

这样做的一种方法是创建三个独立的div。

<div class="top-container"></div> 
<div class="top-container"></div> 
<div class="top-container"></div>

清除容器并浮动子容器

#header .top-container{
  width:33%;
  float:left;
}

请查看此小提琴，了解完整代码：http://jsfiddle.net/xZC3G/2/

Answer 4

我这样做的方法是首先制作一个大div，然后将每个字段放入自己的div中，这会创建一个内部等间隔div的大div，然后就更容易对它进行css。

Answer 5

不太清楚你的意思，但请记住，每个新div都是一个块级元素，所以除非你另有说明，否则它会有自己的行。尝试使用display：与你的浮点内联。

如何使用内联内容制作div？

5 个答案: