Question

我试图并排显示两个div。我已经尝试了我在互联网上找到的所有东西。但它没有用。其中一个div略低于另一个div。我也试过Bootstrap。我不是设计专家。所以，帮助我。 div的定位如下：

 Div-1
                                          Div-2

我的代码在这里：

  <div style="display:inline-block;float:left"> 

           <ul  name="category" id="category" class="navigation" >

           <a class="main" >Brand</a> 

           @foreach ($brands as $brand)

                <li class='n1'><a href="{{$brand->id}}" class="selected" data-id="{{$brand->id}}">{{$brand->brand}}</a></li>
            @endforeach

        </ul>

  </div> 



<div style="display:inline-block;float:right">
   <ul class="navigation" name="model" id="model" >
          <a class="main" >Model</a>


           </ul>
</div>

我的CSS：

         .navigation {
  list-style: none;
  padding: 0;
  width: 250px; 
  height: 40px; 

  background: #95C11F;
}

.navigation li { 
  width: 250px; 
  height: 40px;
}

Answer 1

类似于this？

<div class="brand">Brand</div>
<div class="model">Model</div>

-

.brand, .model {
  float:left;
  padding:5px;
  width: 250px; 
  height: 40px;
  text-align: center;
}
.brand {
  background: rgba(88,0,0,0.5);
}
.model {
  background: rgba(0,88,0,0.5);
}

Answer 2

首先，您无法在<a>中添加<ul>代码，如果您在display:inline-block;使用float，则无需添加data: [ Creative { id: '5631943370604544', gid: '5631943370604544', name: 'Hello', description: '', url: '', videos: [] }, Creative { id: '5653294995210240', gid: '5653294995210240', name: 'Yo', description: '', url: '', videos: [] }, Creative { id: '5745189578604544', gid: '5745189578604544', name: 'Sup', description: '', url: '', videos: [] } ]。所以，首先解决这些问题并再次检查。如果您仍然遇到问题，请分享截图，以便我了解到底发生了什么。

并排对齐Div不起作用

2 个答案: