制作嵌套div的圆角
[英]Make rounded corners for nested div
问题描述
I'm trying to make a rounded corners for my responsive table using div but the top part of the div isn't being rounded. 
我正在尝试使用div为我的响应表制作一个圆角，但div的顶部没有被四舍五入。
This is how my current preview looks like: 这是我当前预览的样子：
Full code: http://jsfiddle.net/ajt98kqy/ 完整代码： http ： //jsfiddle.net/ajt98kqy/
My HTML structure: 我的HTML结构：
<div class="coltable">
<div class="col">
<h4>Name</h4>
<p>John</p>
</div>
<div class="col">
<h4>Title</h4>
<p>Manager</p>
</div>
What I want to achieve is rounded corner (top border isn't rounded yet). 我要实现的是圆角（顶部边框尚未圆角）。 How can I fix this? 我怎样才能解决这个问题？
4 个解决方案
解决方案1
3 已采纳 2018-09-26 14:06:47
Your inner content is currently overflowing and is visible. 您的内部内容当前溢出并且可见。 You need to add the CSS property overflow: hidden . 您需要添加CSS属性overflow: hidden 。
So it will be like: 因此它将像：
.coltable {
....
overflow: hidden;
}
In this way no matter how many inner items you add it will always be rounded at the top and bottom. 这样，无论您添加多少内部项目，都将始终在顶部和底部四舍五入。
解决方案2
2 2018-09-26 13:56:16
You need to round the h4 element depending on which column it is in. For example: 您需要根据h4元素所在的列对其取整。例如：
.coltable .col h4 {
margin: 0;
padding: .75rem;
border-bottom: 2px solid #dee2e6;
background-color: blue;
padding-left: 40px;
color: #fff;
border-radius: 10px 0 0 0; // add this to your code
}
.coltable .col:last-child h4 {
border-radius: 0 10px 0 0;
}
The values represent each corner, starting from the top left and going around clockwise. 这些值代表从左上角开始并顺时针旋转的每个角。
I've targeted the right column by using last-child pseudo; 我通过使用last-child伪指令来定位右边的列； if you add an extra 3rd column, it will still work. 如果您添加了额外的第3列，它将仍然有效。
Here is an updated fiddle: http://jsfiddle.net/ajt98kqy/3/ 这是更新的小提琴： http : //jsfiddle.net/ajt98kqy/3/
解决方案3
0 2018-09-26 14:00:20
If you are using Bootstrap 4, you can add the class "rounded" to your div. 如果您使用的是Bootstrap 4，则可以将“四舍五入”类添加到div中。
e.g "<div class="coltable rounded">
Otherwise you can use the style "border-radius" by doing either of the following. 否则，您可以通过执行以下任一操作来使用样式“边界半径”。
Inline styling: 内联样式：
<div class="coltable" style="border-radius: 5px;">
External Styling: 外部样式：
CSS : CSS：
.rounded{
border-radius: 5px; // This will round every side of your border.
}
HTML : HTML：
<div class="coltable rounded">
Remember if you are using external CSS, you will have to link to your css file in the
<head> tag of your document.
<link rel="stylesheet" href="path/to/file/nameofcssfile.css">
解决方案4
-1 2018-09-26 14:07:27
Add overflow: hidden; 添加overflow: hidden; into .coltable class. 进入.coltable类。
Your div .col class is overlaping your .coltable div. 您的div .col类与您的.coltable div .coltable 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.