ATM我正在开发一个网站，并专注于移动视图开始：
在我的第二个网格div上，我发现图像的问题出现在上面的容器对面，如果我向右浮动图像，当我通过350像素视口宽度时，所有子元素开始相对于左手UL移位这不是我想要的。
基本上我希望每个交替的网格div列表和图像是交替的位置，但我希望我的价格和按钮保持中心，就像第一个容器。
如果不清楚道歉，描述问题不是强点。小提琴中的所有标记和CSS。
https://jsfiddle.net/Evilmop44/axpfp1oq/28/
HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/mobile.css">
</head>
<body>
<!-- Add your site or application content here -->
<div id="carSelector">
<p class = "companyBlurb"> <strong>Tees Used Motors </strong> offer a small but quality range of used vehicles across all price ranges.<br>
You can buy with confidence as all of our vehicles come with: <br>
<strong>12 Months MOT<br>
6 Months RAC Warranty<br>
HPI Check<br></strong>
Part Ex considered and vehicle delivery available. <br>
</p>
<p class = "clickDescription"> Click here to see our the best vehicles in our range.</p>
<div id="carSelectModule">
<select name="cars">
<option value="defaultManufactuer" selected = "selected">Manufacturer</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select name="price">
<option value="defaultPrice" selected = "selected">Price</option>
<option value="lessThan1000">Less than £1,000</option>
<option value="2000to3000">£1,000 to £2,000</option>
<option value="2000to3000">£2,000 to £3,000</option>
<option value="moreThan4000">More than £4,000</option>
</select>
</div>
</div>
<div id="gridAds">
<div>
<h1 class="carTitle">Vauxhall Astra 1.4 i Turbo 16v SRi Nav (s/s) 5dr</h1>
<div class = "addBox1"> <img class="carAdImg" src="img/car.jpg"/></div>
<ul class = carSpecListR>
<li>Up To 62.8MPG</li>
<li>Apple Car Play</li>
<li>10,553 miles from new</li>
<li>Automatic</li>
<li>148bhp</li>
<li>Petrol</li>
</ul>
<p class = "carPrice">Only £4,299</p>
<button type="button" class="adButtonleft">View Vehicle</button>
</div>
<div>
<h1 class="carTitle">Vauxhall Astra 1.4 i Turbo 16v SRi Nav (s/s) 5dr</h1>
<ul class = carSpecListL>
<li>Up To 62.8MPG</li>
<li>Apple Car Play</li>
<li>10,553 miles from new</li>
<li>Automatic</li>
<li>148bhp</li>
<li>Petrol</li>
</ul>
<div class = "addBox2">
<img class="carAdImgRight" src="img/car.jpg"/>
</div>
<p class = "carPrice">Only £4,299</p>
<button type="button" class="adButtonleft">View Vehicle</button>
</div>
<div>
<h1 class="carTitle">I am car</h1>
<div class="addBox1">Advert Images</div>
<div class="addBox1">Text Content</div>
<button type="button" class="adButtonleft">View Vehicle</button>
</div>
<div>
<h1 class="carTitle">I am car</h1>
<div class="addBox1">Advert Images</div>
<div class="addBox1">Text Content</div>
<button type="button" class="adButtonright">View Vehicle</button>
</div>
</div>
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () {
ga.q.push(arguments)
};
ga.q = [];
ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
CSS
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
#gridAds {
grid-template-columns: 1fr;
grid-gap: 0.5em;
display: grid;
}
#gridAds > div {
background: #d4d4d4;
padding: 1em;
box-sizing: border-box;
border: 2px solid white
}
#gridAds > div:nth-child(odd){
background: #f3f4f6;
}
#carSelector {
width: 100%;
background-color: #0060a7;
height: auto;
text-align: center;
}
#carSelectModule {
position: relative;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
}
.adRightBox {
width: auto;
}
.addBox1 {
display: inline-block;
width: 48%;
margin: 0em auto;
height: auto;
min-width: 48%;
}
.addBox2 {
display: inline;
width: 48%;
margin: 0em auto;
height: auto;
min-width: 48%;
float: right;
}
.adButtonright {
background-color: rgba(173, 216, 230, 0.25);
border-color: rgba(0, 96, 167, 0.35);
border-radius:0.2em;
padding: 0.4em;
position: relative;
display: block;
font-size: 1em;
margin: 0em auto;
cursor: pointer;
}
.adButtonright:hover {
background-color: lightblue;
box-shadow: #cccccc;
}
.adButtonleft {
background-color: rgba(173, 216, 230, 0.25);
border-color: rgba(0, 96, 167, 0.35);
border-radius:5px;
padding: 0.4em;
display: block;
font-size: 1em;
margin: 0 auto;
cursor: pointer;
}
.adButtonleft:hover {
background-color: lightblue;
}
.companyBlurb {
border: 0px; color: #f3f4f6;
padding: 2em;
box-sizing: border-box;
max-width: 70%;
font-size: 0.7em;
line-height: 1.6;
}
.carTitle{
text-align: left;
font-size: 20px;
}
.carAdImg{
display: inline-block;
margin: auto;
max-width: 100%;
float:right;
}
.carAdImgRight{
display: inline-block;
margin: auto;
max-width: 100%;
float:right;
}
.carSpecListR {
font-size: 0.7em;
list-style: none;
display: inline-block;
float: right;
line-height: 1.2;
vertical-align: middle;
}
.carSpecListL {
font-size: 0.7em;
list-style: none;
position: relative;
display: inline-block;
padding-left: 0.2em;
line-height: 1.2;
margin-right: 2em;
vertical-align: middle;
}
.carPrice {
font-size: 1em;
font-style: oblique;
font-weight: bold;
display:block;
padding: 0.5em;
}
.clickDescription {
border: 0px; color: #f3f4f6;
padding: 0.5em;
box-sizing: border-box;
max-width: fit-content;
line-height: 1.6;
font-size: 1em;
background-color: #f3f4f6;
color: #0060a7;
}
p {
font-size: 12px;
margin: 0 auto;
text-align: center;
padding: 1%;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap; /* 1 */
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
-webkit-clip-path: none;
clip-path: none;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
white-space: inherit;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; /* Black prints faster:
http://www.sanbeiji.com/archives/953 */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
谢谢
答案 0 :(得分：1)
https://jsfiddle.net/axpfp1oq/24/
.carPrice clear：两者都是为了让花车更容易预测
.carSpecListR - 删除默认的css边距和填充，并为块添加最大宽度以控制浮动
对carSpecListL
执行相同的操作.carSpecListR {
font-size: 0.7em;
list-style: none;
display: inline-block;
float: right;
line-height: 1.2;
vertical-align: middle;
margin:0;
padding:0;
max-width:50%;
}
.carPrice {
font-size: 1em;
font-style: oblique;
font-weight: bold;
display:block;
padding: 0.5em;
clear: both;
}