如何将两个div放在彼此相邻的块中

时间:2016-03-03 07:24:48

标签: html5 twitter-bootstrap css3

我正在尝试在块中放置两个单独的div,一个是名称和名称。

这是Fiddle

现在名称块必须显示为名称div旁边的单独块,无论响应性如何。如何实现这一点。

div不应该彼此缠绕

2 个答案:

答案 0 :(得分:0)

试试这个

.left{
  margin: 0px;
  padding: 0px;
  display:block;
  float: left;
  width:50%
}

.right{
   margin: 0px;
   padding:0px;
   display:  block;
   width:50%;
   float:right;
}
 
 .arrow{
  list-style-type: none;
}

.arrow li:before{
  content: '\f0da';
  font-family:'FontAwesome','sans-serif';
  float: left;
  padding-right: 5px;
  color: #922B38;
}
  <div class="left">
    <ul class="arrow">
      Name block
      <li>Name</li>
      <li>Name</li>
      <li>Name</li>
      <li>Name</li>
    </ul>
  </div>
  <div class="right">
  <ul class="arrow">
    Names block
    <li>Names</li>
    <li>Names</li>
    <li>Names</li>
    <li>Names</li>
  </ul>
</div>

答案 1 :(得分:0)

您可以float使用width来达到效果:

.left{
  float: left;
  width:50%;
}

.right{
  float:left;
  width:50%;
}

https://jsfiddle.net/oem6r3eL/7/