left aligned content in centered block (responsive layout)
Question
So, I'm working on the same kind of thing and having a similar issue. None of the responses I've found have worked for it.
Here's the fiddle: http://jsfiddle.net/VeritoAnimus/m34rmmda/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<style>
body {
margin: 0px;
padding: 0px;
font-size: 0px;
}
.my-block {
display: inline-block;
width: 31%;
min-height: 300px;
background-color: #0ff;
border: 1px solid black;
margin: .5%;
padding: .5%;
text-align: center;
align-content: center;
vertical-align: top;
}
.inner-block {
display: inline-block;
min-height: 140px;
background-color: rgba(90, 213, 25, 0.42);
border: 1px solid black;
margin: 4px auto;
padding: 4px;
text-align: left;
}
.small-block {
display: inline-block;
width: 40px;
height: 40px;
background-color: #4cff00;
border: 1px solid black;
margin: 4px;
padding: 4px;
}
</style>
</head>
<body>
<div class="my-block">
</div>
<div class="my-block">
<div class="inner-block">
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
<div class="small-block"></div>
</div>
</div>
<div class="my-block">
</div>
</body>
</html>
and here's what I'm getting and what I'm looking for
Actual Result
Desired Result
2 answers
solution1
0 2014-10-13 21:28:04
Here you go: DEMO . I assigned a width to .inner-block in the CSS:
.inner-block {
width: 81%;
}
solution2
0 2014-10-13 21:56:00
Currently there's no way to achieve the desired result with only CSS. My solution to this would be, after load, change the width of .inner-block . I would use JS to calculate the current width of its parent .my-block and then find the next smallest multiple of 56px (size of the small boxes when accounting for padding and margin) to get the new size of the .inner-block . Otherwise, without a set width, .inner-block will expand to fill as much of the parent container as possible.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.