我试图将4个div分开，我希望第一个和最后一个div边缘位于页面的边缘，并且每个中间div之间的空间相等。我似乎无法从最后一个div中删除填充，而div不会比其他div略大。
如果用户在平板电脑或手机等小屏幕上观看，我还需要div来改变大小。在移动设备上的含义，所有div将位于屏幕的边缘，并填充在div1 - div2和div3之间 - div4
我设法实现几乎我的目标的唯一方法是向左和向右填充每个div 5px，但然后第一个和最后一个div不在页面边缘。
Heres是我的代码的小提琴，调整屏幕大小以改变大小。
https://jsfiddle.net/cmjuc4e8/
任何帮助都会被批准!!
HTML
<!doctype html>
<meta name="viewport" content="width=device-width">
<body>
<div class="home-category-box">
<img src="http://via.placeholder.com/300x300" width="100%">
<div style="padding:10px; font-size:16px; color:#FFF; text-align:center; background-color: #C50132;"><b>TITLE 1</b><br>####</div>
</div>
<div class="home-category-box">
<img src="http://via.placeholder.com/300x300" width="100%">
<div style="padding:10px; font-size:16px; color:#FFF; text-align:center; background-color: #C50132;"><b>TITLE 2</b><br>####</div>
</div>
<div class="home-category-box">
<img src="http://via.placeholder.com/300x300" width="100%">
<div style="padding:10px; font-size:16px; color:#FFF; text-align:center; background-color: #C50132;"><b>TITLE 3</b><br>####</div>
</div>
<div class="home-category-box">
<img src="http://via.placeholder.com/300x300" width="100%">
<div style="padding:10px; font-size:16px; color:#FFF; text-align:center; background-color: #C50132;"><b>TITLE 4</b><br>####</div>
</div>
</body>
CSS
.home-category-box {
width: 25%;
display: block;
float: left;
box-sizing: border-box;
padding-right:15px;
margin-bottom:15px;
}
@media screen and (max-width:760px){
.home-category-box {
width: 50%;
display: block;
float: left;
box-sizing: border-box;
}
}
答案 0 :(得分：2)
假设您的目标是相对现代的浏览器，您可以选择使用CSS flexbox：
*,
*::before,
*::after {
/* sets defaults for all elements and the ::before and
::after pseudo-elements: */
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* causes the <body> to use the flex layout: */
display: flex;
/* allows content to wrap to a new row: */
flex-wrap: wrap;
/* causes the direction of content flow
to run along 'rows' (as opposed to
columns) in the DOM order (rather than
row-reverse which would reverse the flow): */
flex-direction: row;
/* places the first and last element at the edges
of the parent element, with space between sibling
elements: */
justify-content: space-between;
align-items: auto;
/* aligns the contents with equal space around (above
and below) in the cross-axis of the content-flow: */
align-content: space-around;
/* setting the width to the width of the viewport: */
width: 100vw;
}
.home-category-box {
/* prevents the elements from growing/shrinking as the
parent element, or viewport, resizes in respects
to siblings: */
flex: 0 0 auto;
/* to force an obvious space between elements; adjust to
taste: */
width: 20%;
}
.home-category-box>img+div {
/* all CSS here is from the in-line style attribute
that made the HTML look messy; adjust to taste: */
padding: 10px;
font-size: 16px;
color: #FFF;
text-align: center;
background-color: #C50132;
}
/* for 'small' screens: */
@media screen and (max-width:760px) {
/* changes the width of the matching elements,
to force only two items per line: */
.home-category-box {
width: 45%;
}
}<div class="home-category-box">
<img src="http://via.placeholder.com/300x300" width="100%">
<div><b>TITLE 1</b>
<br>####</div>
</div>
<div class="home-category-box">
<img src="http://via.placeholder.com/300x300" width="100%">
<div><b>TITLE 2</b>
<br>####</div>
</div>
<div class="home-category-box">
<img src="http://via.placeholder.com/300x300" width="100%">
<div><b>TITLE 3</b>
<br>####</div>
</div>
<div class="home-category-box">
<img src="http://via.placeholder.com/300x300" width="100%">
<div><b>TITLE 4</b>
<br>####</div>
</div>
或CSS网格：
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* causes the <body> to use CSS grid layout,
and causes its children to be laid out as
grid-items: */
display: grid;
/* defines four columns, each of which is
one fractional unit: */
grid-template-columns: repeat(4, 1fr);
/* gutter between columns: */
grid-column-gap: 1rem;
/* gutter between rows: */
grid-row-gap: 1rem;
width: 100vw;
}
.home-category-box>img+div {
padding: 10px;
font-size: 16px;
color: #FFF;
text-align: center;
background-color: #C50132;
}
@media screen and (max-width:760px) {
body {
/* on 'small' screens we define a two-column
layout; and rely on the grid-layout to
place elements beyond the second on
implicit rows: */
grid-template-columns: repeat(2, 1fr);
}
}<div class="home-category-box">
<img src="http://via.placeholder.com/300x300" width="100%">
<div><b>TITLE 1</b>
<br>####</div>
</div>
<div class="home-category-box">
<img src="http://via.placeholder.com/300x300" width="100%">
<div><b>TITLE 2</b>
<br>####</div>
</div>
<div class="home-category-box">
<img src="http://via.placeholder.com/300x300" width="100%">
<div><b>TITLE 3</b>
<br>####</div>
</div>
<div class="home-category-box">
<img src="http://via.placeholder.com/300x300" width="100%">
<div><b>TITLE 4</b>
<br>####</div>
</div>
答案 1 :(得分：1)
如果这是一个新项目，我建议您使用flexbox。一旦掌握了它，就会比花车容易得多。
在包含元素中放置一行，并在左侧和右侧添加一个与左侧和右侧填充相等的左右边距。负边距将内部元素拉出父元素。这与Bootstrap等框架使用的方法相同。
NavigationPage.HasBackButton="False"
body {
margin: 0;
}
.box-row {
display: flex;
flex-wrap: wrap;
margin: 0 -5px;
}
.home-category-box {
width: 50%;
padding: 5px;
box-sizing: border-box;
}
.box-meta {
padding: 10px;
font-size: 16px;
color: #FFF;
text-align: center;
background-color: #C50132;
font-weight: bold;
}
@media ( min-width: 760px ) {
.home-category-box {
width: 25%;
}
}
答案 2 :(得分：0)
我会执行以下操作，仅在内部div的左侧和右侧应用填充。
byte[] decodedKey = Base64.getDecoder().decode(encodedKey);
SecretKey originalKey = new SecretKeySpec(decodedKey, 0, decodedKey.length, "AES");