子级div与Parent Overflows

时间：2018-03-26 05:25:21

标签： html css

在进行了多次Google搜索后，我无法找到原因相同的父级子女为什么会出现问题。

例如

<div style="background:blue;width:500px;height:40px">
      <div style="border:1px solid red;height:40px;font-size:0px;display:inline-block;width:30%;">
      </div>
      <div style="border:1px solid black;height:40px;font-size:0px;display:inline-block;width:70%;">
      </div>
    </div>

上面的代码显示第一个子div标签的高度比父级高1px。此外，当两个孩子的百分比宽度加起来达到100％时，父母仍然无法适应两个div。

5 个答案:

答案 0 :(得分：2)

首先 - 盒子模型

您的边框正在为框添加尺寸，大多数人最近使用box-sizing作为默认设置

* {
  box-sizing: border-box
}

（如果您有选择，只需将其放入全局CSS并完成它）

强烈建议您阅读box model，对此的基本了解将为您节省很多痛苦（或至少帮助您寻找答案！）

用你的例子：

<div style="background:blue;width:500px;height:40px">
      <div style="box-sizing:border-box; border:1px solid red;height:40px;font-size:0px;display:inline-block;width:30%;">
      </div>
      <div style="box-sizing:border-box; border:1px solid black;height:40px;font-size:0px;display:inline-block;width:70%">
      </div>
    </div>

其次 - inline-block元素

您正面临common issue with inline block个元素，其中 之间的空格正在影响您呈现的内容

通常最好只使用flexbox，或者如果您只限于旧浏览器，float s

使用flexbox 

<div style="background:blue;width:500px;height:40px;display: flex;">
  <div style="box-sizing:border-box; border:1px solid red;height:40px;font-size:0px;width:30%;">
  </div>
  <div style="box-sizing:border-box; border:1px solid black;height:40px;font-size:0px;width:70%">
  </div>
</div>

使用float left 

<div style="background:blue;width:500px;height:40px;/* display: flex; */">
  <div style="box-sizing:border-box;border:1px solid red;height:40px;font-size:0px;width:30%;float: left;">
  </div>
  <div style="box-sizing:border-box;border:1px solid black;height:40px;font-size:0px;width:70%;float: left;">
  </div>
</div>

如果你真的必须使用inline-block

请参阅上面的链接以获取解决方法，所有这些都在某些方面令人不满意，例如

<div style="background:blue;width:500px;height:40px">
  <div style="box-sizing:border-box; border:1px solid red;height:40px;font-size:0px;display:inline-block;width:30%;">
  </div><!-- commenting out carriage return
  --><div style="box-sizing:border-box; border:1px solid black;height:40px;font-size:0px;display:inline-block;width:70%">
  </div>
</div>

答案 1 :(得分：0)

由于box-sizing css属性...它的默认值和初始值为content-box，这意味着元素的宽度和高度包含内容，而不是其填充，边框

您需要将box-sizing: border-box设置为div，以便填充和边框将包含在元素的宽度和高度中。

由于display:inline-block，你的div并不是并排的。多数民众赞成如何运作。使用inline-block在一行中设置元素会在它们之间创建空格，就像我们输入时的单词一样，这是常见的事情。

因此，要删除它们之间的空格，请在代码中删除这两个div之间的空格，或将font-size:0设置为父div，然后将font-size: initial设置为子元素。

* {
  box-sizing: border-box;
}
<div style="background:blue;width:500px;height:40px;font-size:0;">
  <div style="border:1px solid red;height:40px;font-size:0px;display:inline-block;width:30%;">
  </div>
  <div style="border:1px solid pink;height:40px;font-size:0px;display:inline-block;width:70%;">
  </div>
</div>

或者，如果浏览器支持不是问题，则使用Flexbox 

* {
  box-sizing: border-box;
}
<div style="background:blue;width:500px;height:40px;display:flex;">
  <div style="border:1px solid red;height:40px;font-size:0px;display:inline-block;width:30%;">
  </div>
  <div style="border:1px solid pink;height:40px;font-size:0px;display:inline-block;width:70%;">
  </div>
</div>

答案 2 :(得分：0)

请检查：

<div style="background:blue;width:500px;height:41px">
  <div style="border: 1px solid red;height:40px;width:29%;float:left;">
  </div>
  <div style="border:1px solid black;height:40px;width:70%; float:left">
  </div>
</div>

答案 3 :(得分：0)

不要忘记边界。此外，儿童是box-sizing: border-box s，所以儿童之间的空间（或制表）有自己的宽度。设置div { box-sizing: border-box; }并删除块之间的任何空格：

<div style="background:yellow;width:500px;height:40px">
  <div style="border:1px solid red;height:40px;font-size:0px;display:inline-block;width:30%;">
  </div><div style="border:1px solid blue;height:40px;font-size:0px;display:inline-block;width:70%;">
  </div>
</div>
$("#startDate").datetimepicker({ format:'YYYY/MM/DD HH:mm' , locale: g_state_language, useCurrent: false, stepping: 45, defaultDate: false, sideBySide:true });

答案 4 :(得分：0)

要解决这个问题，您需要将public class AppManager { private Context mContext; private AppInfo appInfo; private ArrayList<AppInfo> myApps; public AppManager(Context c) { mContext = c; myApps = new ArrayList<AppInfo>(); } public ArrayList<AppInfo> getApps() { loadApps(); return myApps; } private void loadApps() { List<ApplicationInfo> packages = mContext.getPackageManager().getInstalledApplications(0); for (ApplicationInfo packageInfo : packages) { AppInfo newApp = new AppInfo(); newApp.setAppName(getApplicationLabelByPackageName(packageInfo.packageName)); newApp.setAppPackage(packageInfo.packageName); newApp.setAppIcon(getAppIconByPackageName(packageInfo.packageName)); myApps.add(newApp); } Collections.sort(myApps, new Comparator<AppInfo>() { @Override public int compare(AppInfo s1, AppInfo s2) { return s1.getAppName().compareToIgnoreCase(s2.getAppName()); } }); } // Custom method to get application icon by package name private Drawable getAppIconByPackageName(String packageName) { Drawable icon; try { icon = mContext.getPackageManager().getApplicationIcon(packageName); } catch (PackageManager.NameNotFoundException e) { e.printStackTrace(); // Get a default icon icon = ContextCompat.getDrawable(mContext, R.drawable.ic_launcher_background); } return icon; } // Custom method to get application label by package name private String getApplicationLabelByPackageName(String packageName) { PackageManager packageManager = mContext.getPackageManager(); ApplicationInfo applicationInfo; String label = "Unknown"; try { applicationInfo = packageManager.getApplicationInfo(packageName, 0); if (applicationInfo != null) { label = (String) packageManager.getApplicationLabel(applicationInfo); } } catch (PackageManager.NameNotFoundException e) { e.printStackTrace(); } return label; } } 添加到正文，box-sizing: border-box添加到父级，同时更改子级的white-space: nowrap;

即：

display: inline-block

CSS：

<div class="parent">
   <div class="child first"> </div>
    <div class="child second"> </div>
</div>

检查一下 https://jsfiddle.net/_ahmed_ab/4301hwmc/1/

相关问题
最新问题