1
我正在开发一个项目，我的布局是我的客户想要的。对于响应式布局，我很陌生。在宽度为321px的移动设备中，Im努力让右列在屏幕/设备的整个宽度上展开。CSS响应式查询
我明白这可能是一个重复的问题，下面是一个小提琴，但如果任何人都可以看看，并提供一些爱心或指向我以前的答案，我将不胜感激。
@media only screen
and (max-width : 320px) {
\t
.container {
width: 321px ! important; \t
} \t
\t
#columnright {
display: block ! important;
float: non ! important;
width: 100% ! important;
clear: right; \t
margin-left; 10%;
} \t
}
body {
background-image: url(images/khBG.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
margin: 0;
padding: 0;
font-family: "Century Gothic", Verdana, sans-serif;
color: black;
border: 1px solid black;
}
#banner {
padding-right: 5%;
opacity: 0.7234;
background-color: #ffffff;
border-bottom: 1px solid black;
}
\t
#banner ul {
float: right;
font-size: 0.70em
}
#banner ul li {
display: block;
float: left
}
\t
#columnleft {
padding-left: 1%;
background-color: #ffffff;
border-bottom: 1px solid black;
opacity: 0.7234;
float: left;
width: 15%;
margin-left: 0%;
padding-top: 1%;
}
#columnright {
padding-left: 1%;
background-color: #ffffff;
border-bottom: 1px solid black;
opacity: 0.7234;
padding-top: 2%;
width: 50%;
float: right;
overflow: hidden;
margin-right: 30%;
}
#columnright ul {
overflow: hidden;
}
#footer {
clear: both;
background-color: #ffffff;
filter: alpha(opacity=60);
opacity: 0.7234;
padding-bottom: 1em;
padding-left: 200px;
font-size: .60em;
}
#pic-gallery {
margin-left:17.5%; \t
width: 400px;
height: 400px; \t
border: 1px solid black; \t
align-items: center;
display:flex; \t
}
#pic-ver {
padding-top: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 100px; \t
}
#pic-hor {
padding-top: 100px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 50px;
}
#myGallery {
position: relative;
width: 320px;
/* Set your image width */
height: 267px;
/* Set your image height */
}
#myGallery img {
display: none;
position: absolute;
top: 0;
left: 0;
}
#myGallery img.active {
display: block;
}
.titlegrp {
\t
}
.title {
float: right;
margin-right: 17.5%;
margin-top: 7.5%;
}
.subtitle {
font-family: "Segoe Script", Segoe, sans-serif;
font-size: 1.05em;
}
.h1 {
font-family: "Segoe Script", Segoe, sans-serif;
font-size: .9em;
}
.imgleft {
float: left;
margin-right: 5px;
}
.imgright {
float: right;
margin-right: 60px;
}
.contentpara {
padding-left: 15px;
}
.sidelinks {
font-family: "Century Gothic", Verdana, sans-serif;
}
.sidelinks a:link {
text-decoration: none;
color: black;
}
.sidelinks a:hover {
text-decoration: none;
font-family: "Segoe Script", Segoe, sans-serif;
}
.sidelinks a:visited {
text-decoration: none;
color: blue;
}
.tablecont {
padding-left: 15px;
}
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
\t -webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
}
div.img:hover {
border: 1px solid #777;
\t }
div.img {
width: 100%;
height: auto;
\t
}
div.desc {
padding: 15px;
text-align: center;
}
.image-wrapper { \t
margin: auto;
align-items: center;
justify-content: center;
}
.gal-butt {
font-size: 2.5em;
margin: auto;
}<!doctype html>
<html lang="en">
<header>
<meta charset="utf-8">
<title>Katie's House - West Hull Based Childminder</title>
<link rel="ICON" href="images/KH_logo.ico" type="image/ico" />
<meta name="description" content="">
<meta name="author" content="Brian Johnson">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="KHjscript.js"></script>
<link rel="stylesheet" href="kHIndex.css">
</header>
<body>
<div class="container">
<div id="banner">
<ul class="none">
\t \t \t <li class="nav"> <a href="https://www.facebook.com/KatieSummersChildminder/" target="_blank">
\t \t \t <img border="0" alt="Contact us on Facebook" src="images/fBook_Icon_Black.gif" width="30" height="30"></a></li>
\t \t \t <li class="nav"> <a href="mailto:[email protected]">
\t \t \t <img border="0" alt="Contact via Email" src="images/email_Icon_Black.gif" width="30" height="30"></a></li>
\t \t \t <li class="field"><input type="text" title="Search" text="Search" /></li> \t \t \t
\t \t </ul> \t \t
<div class="titlegrp">
<img class="title" src="images/kH_title.png" alt="Katies House Title"> \t \t
<img src="images/KH_logo.jpg" alt="Katies House Logo">
</div>
<div style="clear: both;"></div> \t \t
</div> \t
<div id="columnleft">
<div class="subtitle"><p><u>Site Navigation</u></p></div>
<div class="sidelinks">
<a href="Index.htm">Home</a>
<br>
<a href="About.htm">About</a>
<br>
<a href="Sample_Day.htm">Sample Day</a>
<br>
<a href="Gallery.htm">Gallery</a>
<br>
<a href="Testimonials.htm">Testimonials</a>
<br>
<a href="Enquiries.htm">Enquiries</a>
<br>
</div>
</div>
<div id="columnright">
<div class="subtitle"><u>Katie's House Services</u></div>
<div class="imgleft"><img border="1" alt="Katie and Mindees" src="images/katie_intro_page.jpg"></a>
</div>
<p>What Katie's house can offer you</p>
<ul>
<li>Early years child care 0-5 years</li>
<li>Funded places for eligible 2,3 and 4 year olds at 15 hours per week free</li>
<li>Long term and short term care</li>
<li>Full time and part time places</li>
<li>Professional and affordable</li>
</ul>
\t <hr> \t
<p>My Qualifications</p>
<p>I attend training regularly and have qualifications in:</p>
\t \t
<ul>
<li>Paediatric First Aid</li>
<li>Child Protection</li>
<li>Special Educational Needs</li>
<li>Food Hygiene</li>
\t \t <li>Health and Safety</li>
<li>Equal Opportunities</li>
\t \t <li>Home based Childcare</li>
\t \t <li>Working with two year olds</li>
<li>schemas</li>
\t \t <li>NVQ3 Children's care, Learning and Development</li>
\t \t <li>Open University - Understanding Autism</li>
\t \t </ul> \t \t
\t
\t \t <br>
<p>Click below for a little information on Childminding</p>
<a href="http://www.pacey.org.uk/parents/types_of_childcare/registered_childminders.aspx" target="_blank">Pacey's Info on Registered Childminders</a>
\t \t <div style="clear: both;"></div>
\t \t <br>
</div>
\t
<div id="footer">
<p>Brian Johnson
<br>© Copyright 2016. All Rights Reserved</p>
</div>
\t </div>
</body>
</html>https://jsfiddle.net/aw3eb1oa/