Question

我的要求是：

我想在一行中放置3个div

如： -

  Name(h1)(leftside)    searchbox(form)(middle)  name2(divleft)(rightside)

我已经完成了jsfiddle代码--- jsfiddle code 但这里的这些并不是一条线...... 我究竟做错了什么？？

Answer 1

您可以通过浮动三个元素来实现此目的。

.block1 {
  float: left;
  background: red;
  padding: 10px;
}

.block2 {
  float: left;
  background: blue;
  padding: 10px;
}

.block3 {
  float: left;
  background: yellow;
  padding: 10px;
}

<div class="block1">
  <h1>Left</h1>
</div>

<div class="block2">
  <h1>Left</h1>
</div>

<div class="block3">
  <h1>Left</h1>
</div>

Answer 2

或者你可以使用flexbox。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

text

varchar

Answer 3

你需要我们的分裂如下：

＆＃13;

#container
{
    width:100%;
}

#left, #center, #right
{
    width:33.33%;
    float:left;
    text-align:center;
}

#label1
{
     float:left;  
    margin-right:5px;
}

#input1
{
    float:left;   

}

#center
{
    overflow:hidden;
    padding-top:30px;
    
}

＆＃13;

<div id="container"> 
    <div id="left"> <h1><a>Mycat </a></h1></div>
    <div id="center">  
            <form id="search" action="#" method="post">
                <div id="label1">
                    <label for="search-terms" id="search-label">search</label>                 </div>
                <div id="input1">
                        <input type="text" name="search-terms" id="search-terms" size="14" placeholder="Enter search terms...">
                </div>
            </form>
    </div>
    <div id="right"><h1><a>shipment </a></h1></div>
    </div>

＆＃13;

Answer 4

请在此处查看更新的js fiddle。明白了，我还没有正确清理代码，只是进行了更改以使其按照您的意愿工作。

给出的html和css格式不正确，需要进行相当清理以使事情正确。这是一个稍好的版本。

#divleft {
    float: right;
    /*margin-top: 15px;*/
    display:inline-block;
}
#search {
    /*position: relative;
    float: left;
    width: 60px;
    height: 60px;
    margin-left: -60px;*/
    margin-left: 15px;
    display: inline;
}

css的主要变化是

setMargins

如果你真的想浮动元素（甚至在彼此之上），请使用float。要保持相同的行显示：内联/内联块应该工作。它允许将其他元素放在它们附近。

如果你真的想要，你可以将你的特定高度，宽度添加回css。

Answer 5

这是代码，其中3个div放在一行和中间div是灵活的

HTML：

<div class="left">left</div>
<div class="right">right</div>
<div class="middle"><div class="form">middle form</div></div>

CSS：

.left{
    background:red;
    min-width:70px;
    float:left;

}
.middle{
    background:yellow;

}
.right{
    float:right;
    min-width:70px;
    background:green
}

Answer 6

使用float: left强制阻止元素并排。然后clear: left结束浮动。

Css如何在一行中设置3个块块/ div

6 个答案: