Question

我正在尝试制作响应式布局。我在两个不同的<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/lib/com.example.jaisonjoseph.newsclient" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.example.jaisonjoseph.newsclient.MainActivity" tools:showIn="@layout/app_bar_main" style="@style/Base.Widget.AppCompat.ButtonBar" android:background="#ffffff"> <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_width="350dp" android:layout_height="150dp" app:cardCornerRadius="6dp" android:background="#f6f6f6" android:layout_alignParentTop="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true"> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/daily" android:id="@+id/imageButton3" android:src="@drawable/daily" /> </android.support.v7.widget.CardView> </RelativeLayout>元素中有两个<div>。我想在屏幕更改和特定大小的媒体查询上调整它们。我希望他们向下移动如果我以像素形式显示它们的宽度，它们会相互靠近，但如果我以百分比形成宽度，它们会相互重叠。如何以百分比形式显示宽度而不是相互重叠？请看jsfiddle。感谢

li

#btmIconsDiv {
  float: left;
  margin-top: 84px;
  width: 100%;
  height: 341px;
  background-color: orange;
  position: relative;
}
#btmIconsDiv ul li {
  display: inline-block;
  list-style-type: none;
  margin-left: 30px;
}
#btmIconsDiv ul li div.btmIconsUlliDiv {
  float: left;
  width: 274px;
  height: 300px;
  background-color: red;
  border: 1px solid blue;
}

的jsfiddle https://jsfiddle.net/mohsinali/mucs2ep3/1/

Answer 1

只需修改此css

即可

#btmIconsDiv ul li{  
 display: inline;// you have to correct this
 list-style-type: none;  
 margin-left: 30px;       
 }

<强> 1。更新

对于该边距问题，请使用此

#btmIconsDiv
{

float: left;
margin-top: 84px;
width: 100%;
height: 341px;
background-color: orange;    
position: relative;
display:table;           // add this 
}

您可以将其用作已更新 Fiddle

Answer 2

试试这个

#btmIconsDiv ul
{
    width: 100%;
    display: inline-block;
    margin: 0px;
    margin-top: 10px;
}
#btmIconsDiv ul li{  
    width: 45%;
    display: inline-block;
    list-style-type: none;  

}

#btmIconsDiv ul li div.btmIconsUlliDiv{    
    float: left;
    width: 100%;
    /*margin-right: 50px;*/
    height: 300px;
    background-color: red;
    border: 1px solid blue;
}

Answer 3

我认为它们重叠的原因是浮动左值。使用浮动没有坏处，因为有明显的情况，它是有用的，但这是一个相当常见的情况。我建议尝试的第一件事是设置溢出：隐藏;有人建议溢出：auto;但隐藏的是我使用的div，当我没有正确的div，它总是有效！祝你好运！

Answer 4

使用CSS3，您可以使用calc属性，它允许您从百分比加上或减去：

#btmIconsDiv{
  float: left;
  margin-top: 84px;
  width: 100%;
  height: 341px;
  background-color: orange;    
  position: relative;
}

#btmIconsDiv ul li{  
  width: calc(50% - 32px); // 50% and minus 30px of margin right + 2px of border...
  display: inline-block;
  list-style-type: none;  
  margin-right: 30px; // user margin right instead of left...
}

#btmIconsDiv ul li div.btmIconsUlliDiv{    
  float: left;
  width: 100%;
  /*margin-right: 50px;*/
  height: 300px;
  background-color: red;
  border: 1px solid blue;
}

https://jsfiddle.net/mohsinali/mucs2ep3/1/

Answer 5

您可以使用Flex解决问题，请尝试下面的代码。

<!DOCTYPE html>
    <html>
    <head>
    <style>
    #btmIconsDiv {
      float: left;
      margin-top: 84px;
      width: 100%;
      height: 341px;
      background-color: orange;
      position: relative;
    }
    #btmIconsDiv ul {
      display: flex;
      list-style-type: none;

    }
    .btmIconsUlliDiv {
      float: left;
      width: 274px;
      height: 300px;
      background-color: red;
      border: 1px solid blue;
    }


    </style>
    </head>
    <body>

    <div id="btmIconsDiv">
      <ul>
        <li>
          <div class="btmIconsUlliDiv"></div>
        </li>
        <li>
          <div class="btmIconsUlliDiv"></div>
        </li>
         <li>
          <div class="btmIconsUlliDiv"></div>
        </li>
      </ul>
    </div> 

    </body>
    </html>

如何在li内部将div彼此对齐，宽度为百分比

5 个答案: