列定位问题,

would really appreciate if you help me with this problem. The two card columns show one below another between 860px and 1200px, and the slider shows to their left. Below 860px and above 1100px it shows them normal. This is the page - http://motopara.com/SandBox/menu-test.php I have attached pictures for better understanding.

它应如何正常显示-img

多数民众赞成在860和1200px之间的屏幕中显示-img

我还放入了主文件的代码;  / * product-skewed-bar begin * /是产品卡的CSS, 您还可以预览代码段并调整浏览器大小以查看问题。

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>Evo Aviation | Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->

  
 <style>

/* ROW-2-COL*/
.column {
  padding: 10px;
}

/* Clear floats after the columns */
.row-2-col:after {
  content: "";
  display: table;
  clear: both;
}
/* CARD BEGIN */
.card {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	max-width: 600px;
	margin: auto;
	text-align: center;
	font-family: arial;
	
}
.card p {
	font-family: "Arial Black", Gadget, sans-serif; 
	font-size: 24px;
	font-weight: bold;
	margin-top: 6px;
	margin-bottom: 5px;
	margin-left: 10px;
	text-align: left;
	padding-top: 6px;
 @font-face {
font-family: roboto-regular;
 src: url('../font/Roboto-Regular.ttf');
 
}
}
.price {
	color: grey;
	font-size: 22px;
}
.card button {
	border: none;
	outline: 0;
	padding: 12px;
	color: white;
	background-color: #000;
	text-align: center;
	cursor: pointer;
	width: 100%;
	font-size: 18px;
}
.card button:hover {
	opacity: 0.7;
}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	padding: 0;
	margin-top: 0px;
	margin-bottom: 10px;
}
/* product-skewed-bar begin*/
.center {
	text-align: right;
	margin-top: 0px;
	margin-right: 0px;
}
div.skewed-heading-content {
	-ms-transform: skew(20deg);
	-webkit-transform: skew(20deg);
	transform: skew(20deg);
	position: relative;
	right: -7px;
	background-color: red;
	padding: 5px 30px;
	font-family: "Arial Black", Gadget, sans-serif;
	font-weight: bold;
}
div.skewed-heading-bg {
	color: #FFF;
	background-color: red;
	display: inline-block;
	padding: 0;
	margin-right: 7px;
	-ms-transform: skew(-20deg, 0);
	-webkit-transform: skew(-20deg, 0);
	transform: skew(-20deg, 0);
}
hr.center {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid red !important;
	padding: 0;
	margin-top: 0px;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
/* product-skewed-bar end*/
@media all and (min-width: 860px) {
.column {
  float: right;
  width: 44%;
  padding: 33px;
  
  }
   
</style>
</head>

<body>
<div class="page-container">
  
<div class="">
 <div class="column">
 
<!-- CARD BEGIN-->
<div class="card">
  <p>REBEL 2 RS</p>
  <hr/>
  <img src="/img/Rebel2_SS_Logo.jpg" alt="R2RS" style="width:100%">
  <hr/>
  <div class="center">
    <div class="skewed-heading-bg">
      <div class="skewed-heading-content"> <a href="rebel.php" style="color:#FFFFFF;"><span style="font-size:12px;">DETAILS</span><i class="fa fa-angle-double-right" style="font-size: 16px; padding-left: 5px;"></i></a> </div>
    </div>
  </div>
  <hr class="center"/>
</div>
</div>
<!-- CARD END-->
  </div>
  <div class="column">
<!-- CARD BEGIN-->
<div class="card">
  <p>ALPHA</p>
  <hr/>
  <img src="/img/sim_n_rob.jpg" alt="RS2" style="width:95%">
  <hr/> 
  <div class="center">
    <div class="skewed-heading-bg">
      <div class="skewed-heading-content"><a href="alpha.php" style="color:#FFFFFF;"> <span style="font-size:12px;">DETAILS</span><i class="fa fa-angle-double-right" style="font-size: 16px; padding-left: 5px;"></i> </a></div>
    </div>
  </div>
  <hr class="center"/>
</div>
</div>
</div></div>
<!-- CARD END--> 
<!-- Partner Crousel --> 
<div class="logo-slider">
<?php include 'client-logo-slider.html';?>
</div>
<!-- Partner Crousel --> 
<!-- CONTENT END -->
<!-- PAGE CONTAINER END -->

   
    
</body>
</html>
评论