Question

我有两个内部div，它们嵌套在一个包装div中。我希望两个内部div一个接一个地排列。但截至目前，他们正在安排在同一条线上。

<div id="wrapper">
    <div id="inner1"></div>
    <div id="inner2"></div>
</div>

CSS

#wrapper{
    margin-left:auto;
    margin-right:auto;
    height:auto; 
    width:auto;
}
#inner1{
    float:left; 
}
#inner2{
    float:left; 
}

Answer 1

尝试清除：留在＃inner2上。因为它们都被设置为浮动，所以它应该导致换行。

#inner1{
float:left; 
}
#inner2{
float:left; 
clear: left;
}

Answer 2

如果您希望将两个div一个显示在另一个之上，最简单的答案是从css声明中删除float: left;，因为这会导致它们崩溃到它们的大小内容（或css定义的大小），并且相互浮动。

或者，您只需将clear:both;添加到div，这将强制浮动的内容清除以前的浮动内容。

Answer 3

div的默认行为是取其父容器中的可用宽度这就像你给内部div的宽度为100％一样。

通过浮动div，它们会忽略它们的默认值并调整其宽度以适合内容。它背后的所有内容（在HTML中）都放在div下（在渲染页面上）这就是他们将自己排成一列的原因。

float CSS属性指定应该从中获取元素正常流动并沿其左侧或右侧放置容器，其中文本和内联元素将环绕它。一个浮动元素是float的计算值不是none的那个。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/float

摆脱浮动，div将彼此对齐。
如果没有发生这种情况，您将在div或子包装上定义浮动行为或内联显示的其他css。

如果你想保留浮动，无论出于何种原因，你可以在第二个div上使用clear来重置元素之前元素的浮动属性。
clear有5个有效值：none | left | right | both | inherit。清除没有浮动（用于覆盖继承的属性），左浮动或右浮动或两个浮动。继承意味着它将继承父元素的行为

此外，由于默认行为，您无需在auto上设置宽度和高度您只需要这个就是要设置硬编码的高度/宽度。例如。 80％/ 800px / 500em / ...

<div id="wrapper">
    <div id="inner1"></div>
    <div id="inner2"></div>
</div>

CSS

#wrapper{
    margin-left:auto;
    margin-right:auto;
    height:auto; // this is not needed, as parent container, this div will size automaticly
    width:auto; // this is not needed, as parent container, this div will size automaticly
}

/*
You can get rid of the inner divs in the css, unless you want to style them.
If you want to style them identicly, you can use concatenation
*/
#inner1, #inner2 {
    border: 1px solid black;
}

Answer 4

将主 <div x-data="{ ...data() }" class="overflow-hidden wrapper w-full "> <div class="flex justify-end w-full relative coins-container space-x-6"> <input id="search-toggle" type="search" pclass="block w-full bg-gray-100 focus:outline-none focus:bg-white focus:shadow text-gray-700 font-bold rounded-lg pl-12 pr-4 py-4 shadow-xl" wire:model.debounce.750ms="searched_term" /> </div> @if($filtered_variable) <template> <div class="mt-1 wrapper"> <div id="search-content" class=" w-full text text-gray-600 rounded-lg overflow-y-auto bg-white shadow-xl" style="max-height: 500px;"> <div id="searchresults" class="h-auto w-full mx-auto"> @foreach ($filtered_variable as $index => $value) <h1 x-text="{{$value['title']}}"></h1> @endforeach </div> </div> </div> </template> @endif </div> Class Searchbar extends Component { public $first_array; public $searched_term; public $filtered_array; public function mount() { $db_content = Stuff::where(function ($query) { $query->where('thing', false) ->orWhereNull('thing'); }) ->with('variable_eg') ->get(); $this->first_array = $db_content; $this->searched_term = ''; $this->filtered_array = []; } public function render() { return view('livewire.searchbar'); } public function updated($name, $value) { if (empty($this->searched_term)) { return ''; } $this->filtered_array = array_filter($this->first_array, array($this, 'filter')); public function filter($element) { $title = strtolower($element['title']); if (strpos($title, $this->searched_term) !== false) { return true; } } CSS 设置为类似：

div

更多 flexbox CSS 参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

您甚至不需要float:left;

似乎默认行为是将一个渲染到另一个之下，如果它没有发生，那是因为他们从上面继承了一些风格。

CSS：

#wrapper{
    margin-left:auto;
    margin-right:auto;
    height:auto; 
    width:auto;
}
</style>

HTML：

<div id="wrapper">
    <div id="inner1">inner1</div>
    <div id="inner2">inner2</div>
</div>

将div一个安排在另一个之下

5 个答案: