响应框和文字没有排队
目前CSS中存在一个非常烦人且棘手的问题。
基本上我有2行，6个盒子。
我还没有在第二行工作，因为我在复制/粘贴代码之前最终确定了第一行的第一个框。
我遇到的问题是文字的宽度。
当您缩小浏览器时会发生这种情况：
文本不应该消失，因为它们仍然留有足够的盒子空间。此时浏览器甚至不是我的macbook pro屏幕的一半，浏览器大约是屏幕的70％，但是盒子文本已经消失了吗？
我如何才能使这2行6盒响应至少一半的屏幕？然后从那里处理它们垂直排列，一次一个盒子（对于电话）。
我实际上已经把css弄乱了2个小时并且不知道，有人请帮忙！我是CSS的新手，为我的I.T公司建立这个网站，最终想做网页开发，所以我推迟了一段时间在这里发帖，但绝对是出于想法。
我的HTML：
<head>
<title>Microfuse Solutions - Home</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/home.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Jura:400,600' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header">
<div class="mainheader">
<nav>
<h1>MICROFUSE SOLUTIONS.</h1>
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">PC Repairs</a></li>
<li><a href="#">Networking & Internet</a></li>
<li><a href="#">Home & Work Servers</a></li>
<li><a href="#">Support Services</a></li>
<li><a href="#">Website Development</a></li>
</ul>
</li>
<li><a href="#">Pricing</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Our Team</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">Testimonials</a></li>
</ul></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
<div class="separator"></div>
<div class="subheader">
<div class="left-content">
<h1><b>Hello.</b></h1>
<h2>Welcome to MICROFUSE</h2>
<p>We assist individuals and businesses in a wide range of technical problems.<br/> We provide a fast, affordable, and reliable service, that comes with a guarantee for your problem to be fixed.<br/> If we do not fix your problem, then we do not charge you.</p>
</div>
<div class="padding"></div>
<div class="right-content">
<img src="images/subheaderlogo.png"/>
</div>
</div>
</div>
</header>
<div class="content">
<div class="firstsection">
<div class="top-row">
<h2> What do we do? </h2>
<div class="left-box-container">
<div class="image">
<img src="images/columns/websites.png">
</div>
<div class="text">
<h1><a href="#">Mobile Solutions</a></h1>
<ul>
<li><img src="images/columns/plus.png"/>No fix no fee!</li>
<li><img src="images/columns/plus.png"/>Fix your tech onsite</li>
<li><img src="images/columns/plus.png"/>Flexible timeframes</li>
<li><img src="images/columns/plus.png"/>Competetive prices</li>
</ul>
</div>
</div>
<div class="middle-box-container">
<div class="image">
<img src="images/columns/websites.png">
</div>
<div class="text">
<h1><a href="#">PC Repairs</a></h1>
<h4><img src="images/columns/plus.png"/>No fix no fee!</h4>
<h4><img src="images/columns/plus.png"/>Fix your tech onsite</h4>
<h4><img src="images/columns/plus.png"/>Flexible timeframes</h4>
<h4><img src="images/columns/plus.png"/>Competetive prices</h4>
</div>
</div>
<div class="right-box-container">
<div class="image">
<img src="images/columns/websites.png">
</div>
<div class="text">
<h1><a href="#">Mobile Solutions</a></h1>
<h4><img src="images/columns/plus.png"/>No fix no fee!</h4>
<h4><img src="images/columns/plus.png"/>Fix your tech onsite</h4>
<h4><img src="images/columns/plus.png"/>Flexible timeframes</h4>
<h4><img src="images/columns/plus.png"/>Competetive prices</h4>
</div>
</div>
</div>
<div class="bottom-row">
<div class="left-box-container">
<div class="image">
<img src="images/columns/websites.png">
</div>
<div class="text">
<h1><a href="#">Mobile Solutions</a></h1>
<h4><img src="images/columns/plus.png"/>No fix no fee!</h4>
<h4><img src="images/columns/plus.png"/>Fix your tech onsite</h4>
<h4><img src="images/columns/plus.png"/>Flexible timeframes</h4>
<h4><img src="images/columns/plus.png"/>Competetive prices</h4>
</div>
</div>
<div class="middle-box-container">
<div class="image">
<img src="images/columns/websites.png">
</div>
<div class="text">
<h1><a href="#">Mobile Solutions</a></h1>
<h4><img src="images/columns/plus.png"/>No fix no fee!</h4>
<h4><img src="images/columns/plus.png"/>Fix your tech onsite</h4>
<h4><img src="images/columns/plus.png"/>Flexible timeframes</h4>
<h4><img src="images/columns/plus.png"/>Competetive prices</h4>
</div>
</div>
<div class="right-box-container">
<div class="image">
<img src="images/columns/websites.png">
</div>
<div class="text">
<h1><a href="#">Mobile Solutions</a></h1>
<h4><img src="images/columns/plus.png"/>No fix no fee!</h4>
<h4><img src="images/columns/plus.png"/>Fix your tech onsite</h4>
<h4><img src="images/columns/plus.png"/>Flexible timeframes</h4>
<h4><img src="images/columns/plus.png"/>Competetive prices</h4>
</div>
</div>
</div>
<center><div class="contact-text">
<p> Can we help?</p>
<p><a href="contact.html">Contact us</a> now!</p>
</div></center>
</div>
</div>
<footer class="mainfooter">
<div class="top-row">
<p class="short-text">Like this website? Thanks, we designed it ourselves.</p>
</div>
<div class="bottom-row">
<p class="copyright"> Copyright © 2015 Microfuse Solutions | ABN 82 681 365 983</p>
</div>
</footer>
</body>
</html>
我的css：
/*
Business Website
Author: Joel Male;
Date Started: 20/06/2015;
Date Finished: **;
*/
/*
////////////////////////////////////
/////////// WEB STUFF //////////////
////////////////////////////////////
*/
@font-face {
font-family: BebasFont;
src: url("../fonts/bebas-font.TTF");
}
@font-face {
font-family: Derive;
src: url("../fonts/derive.TTF");
}
@font-face {
font-family: RobotoBold;
src: url("../fonts/Robot-Bold.TTF");
}
@font-face {
font-family: RobotoRegular;
src: url("../fonts/Robot-Regular.TTF");
}
/*
////////////////////////////////////
////// HANDLE DEFAULT MARKUPS //////
////////////////////////////////////
*/
body {
background-color: #fff;
color: #000305;
font-size: 87.5%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
padding: 0;
margin: 0;
}
a { text-decoration: none }
a:link,
a:visited { }
a:hover,
a:active { }
/*
////////////////////////////////////
//// HANDLE HEADER/CONTAINER ///////
////////////////////////////////////
*/
header {
margin: 0 auto; /* Centers the page */
width: 100%;
clear: both; /* Nothing floats on the page */
}
.content {
width: 70%;
margin: 0 auto;
}
/*
////////////////////////////////////
////// HANDLE THE SEPARATORS ///////
////////////////////////////////////
*/
.mainheader .separator {
margin-left: 15%;
width: 70%;
height: 2px;
background-color: #CF5C3F;
}
.padding {
width: 5%;
}
/*
////////////////////////////////////
////// HANDLE MAINHEADER HERE //////
////////////////////////////////////
*/
.mainheader {
width: 100%;
background-color: #022930;
height: 450px;
}
.mainheader nav {
padding-top: 2%;
height: 40px;
}
.mainheader nav h1 {
color: white;
font-family: 'BebasFont';
margin-top: -12px;
float: left;
padding-left: 15%;
font-size: 40px;
}
.mainheader nav ul {
float: right;
list-style: none;
margin: 0 auto;
padding: 0 15% 0 0;
}
.mainheader nav ul li {
font-family: 'Jura', sans-serif;
font-weight: bold;
position: relative;
display: inline;
}
.mainheader nav ul li ul {
position: absolute;
left: 0;
padding-left: 0px;
}
.mainheader nav a:link,
.mainheader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 20px;
height: 20px;
}
.mainheader nav li:hover>a,
.mainheader nav a:active,
.mainheader nav .active a:link,
.mainheader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
/*
////////////////////////////////////
//// HANDLE THE DROP DOWN MENUS ////
////////////////////////////////////
*/
.mainheader nav ul li:hover ul {
display: block; /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
padding-right: 0;
position: absolute;
top: 27px;
left: 0;
}
.mainheader nav ul ul {
display: none;
position: absolute;
background-color: #666;
}
.mainheader nav ul ul li {
display: block;
padding-right: 0;
min-width: 190px;
}
.mainheader nav ul ul li:hover {
background-color: #CF5C3F;
}
/*
////////////////////////////////////
//// HANDLE THE SUBHEADER CONTENT //
////////////////////////////////////
*/
.mainheader .subheader {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
display: flex;
}
.mainheader .subheader .left-content {
padding-left: 15%;
width: 25%;
float: left;
}
.mainheader .subheader .left-content h1 {
margin-top: 0;
font-family: 'BebasFont';
font-size: 60px;
margin-bottom: 0;
color: #FFF;
}
.mainheader .subheader .left-content h2 {
margin-top: 0;
font-family: 'BebasFont';
font-size: 30px;
margin-bottom: 0;
color: #FFF;
}
.mainheader .subheader .left-content p {
color: #FFF;
font-family: 'Jura';
}
.mainheader .subheader .right-content {
overflow: auto;
width: 60%;
height: 100%;
}
.mainheader .subheader .right-content img {
float: right;
width: 100%;
padding-right: 26.5%;
height: 300px;
}
/*
////////////////////////////////////
//// HANDLE THE FIRST SECTION //////
////////////////////////////////////
*/
.firstsection {
width: 100%;
height: auto;
padding: 10px 0 20px 0;
}
.firstsection h2 {
font-family: 'BebasFont';
font-weight: normal;
font-size: 30px;
margin: 0 0 20px 40px;
}
/*
////////////////////////////////////
///////////// TOP ROW //////////////
////////////////////////////////////
*/
.firstsection .top-row {
width: 100%;
height: 150px;
}
.firstsection .top-row .left-box-container {
float: left;
margin-left: 40px;
width: 30%;
height: 150px;
background-color: #eaeaea;
-webkit-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
-moz-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
}
.firstsection .top-row .left-box-container .image img {
float: left;
width: 100px;
height: 140px;
}
.firstsection .top-row .left-box-container .text {
float: left;
width: auto;
margin-left: 10px;
}
.firstsection .top-row .left-box-container .text h1 {
font-size: 1.5em;
margin: 5px 0 0 0;
margin-right: 50px;
}
.firstsection .top-row .left-box-container .text a {
color: black;
}
.firstsection .top-row .left-box-container .text a:hover {
text-decoration: underline;
}
.firstsection .top-row .left-box-container .text ul {
list-style-type: none;
margin: 3px 0 0 0;
}
.firstsection .top-row .left-box-container .text ul li {
font-weight: bold;
line-height: 1.8em;
}
.firstsection .top-row .left-box-container .text ul li img {
width: 20px;
height: 20px;
float: left;
}
.firstsection .top-row .middle-box-container {
float: left;
margin-left: 40px;
width: 30%;
height: 150px;
background-color: #eaeaea;
-webkit-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
-moz-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
}
.firstsection .top-row .middle-box-container .image img {
float: left;
width: 100px;
height: 140px;
}
.firstsection .top-row .middle-box-container .text {
float: right;
}
.firstsection .top-row .middle-box-container .text h1 {
font-size: 22px;
margin: 5px 0 0 0;
margin-right: 100px;
}
.firstsection .top-row .middle-box-container .text a {
color: black;
}
.firstsection .top-row .middle-box-container .text a:hover {
text-decoration: underline;
}
.firstsection .top-row .middle-box-container .text h4 {
margin: 3px 0 0 0;
padding-left: 20px;
}
.firstsection .top-row .middle-box-container .text h4 img {
width: 20px;
height: 20px;
float: left;
}
.firstsection .top-row .right-box-container {
float: left;
margin-left: 40px;
width: 30%;
height: 150px;
background-color: #eaeaea;
-webkit-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
-moz-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
}
.firstsection .top-row .right-box-container .image img {
float: left;
width: 100px;
height: 140px;
}
.firstsection .top-row .right-box-container .text {
float: right;
}
.firstsection .top-row .right-box-container .text h1 {
font-size: 22px;
margin: 5px 0 0 0;
padding-right: 50px;
}
.firstsection .top-row .right-box-container .text a {
color: black;
}
.firstsection .top-row .right-box-container .text a:hover {
text-decoration: underline;
}
.firstsection .top-row .right-box-container .text h4 {
margin: 3px 0 0 0;
padding-left: 20px;
}
.firstsection .top-row .right-box-container .text h4 img {
width: 20px;
height: 20px;
float: left;
}
/*
////////////////////////////////////
//////////// BOTTOM ROW ////////////
////////////////////////////////////
*/
.firstsection .bottom-row {
margin: 90px 0 0 0;
width: 100%;
height: 150px;
}
.firstsection .bottom-row .left-box-container {
float: left;
margin-left: 40px;
width: 350px;
height: 150px;
background-color: #eaeaea;
-webkit-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
-moz-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
}
.firstsection .bottom-row .left-box-container .image img {
float: left;
width: 100px;
height: 140px;
}
.firstsection .bottom-row .left-box-container .text {
float: right;
}
.firstsection .bottom-row .left-box-container .text h1 {
font-size: 22px;
margin: 5px 0 0 0;
padding-right: 50px;
}
.firstsection .bottom-row .left-box-container .text a {
color: black;
}
.firstsection .bottom-row .left-box-container .text a:hover {
text-decoration: underline;
}
.firstsection .bottom-row .left-box-container .text h4 {
margin: 3px 0 0 0;
padding-left: 20px;
}
.firstsection .bottom-row .left-box-container .text h4 img {
width: 20px;
height: 20px;
float: left;
}
.firstsection .bottom-row .middle-box-container {
float: left;
margin-left: 40px;
width: 350px;
height: 150px;
background-color: #eaeaea;
-webkit-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
-moz-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
}
.firstsection .bottom-row .middle-box-container .image img {
float: left;
width: 100px;
height: 140px;
}
.firstsection .bottom-row .middle-box-container .text {
float: right;
}
.firstsection .bottom-row .middle-box-container .text h1 {
font-size: 22px;
margin: 5px 0 0 0;
padding-right: 50px;
}
.firstsection .bottom-row .middle-box-container .text a {
color: black;
}
.firstsection .bottom-row .middle-box-container .text a:hover {
text-decoration: underline;
}
.firstsection .bottom-row .middle-box-container .text h4 {
margin: 3px 0 0 0;
padding-left: 20px;
}
.firstsection .bottom-row .middle-box-container .text h4 img {
width: 20px;
height: 20px;
float: left;
}
.firstsection .bottom-row .right-box-container {
float: left;
margin-left: 40px;
width: 350px;
height: 150px;
background-color: #eaeaea;
-webkit-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
-moz-box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
box-shadow: 7px 0px 29px -3px rgba(0,0,0,0.85);
}
.firstsection .bottom-row .right-box-container .image img {
float: left;
width: 100px;
height: 140px;
}
.firstsection .bottom-row .right-box-container .text {
float: right;
}
.firstsection .bottom-row .right-box-container .text h1 {
font-size: 22px;
margin: 5px 0 0 0;
padding-right: 50px;
}
.firstsection .bottom-row .right-box-container .text a {
color: black;
}
.firstsection .bottom-row .right-box-container .text a:hover {
text-decoration: underline;
}
.firstsection .bottom-row .right-box-container .text h4 {
margin: 3px 0 0 0;
padding-left: 20px;
}
.firstsection .bottom-row .right-box-container .text h4 img {
width: 20px;
height: 20px;
float: left;
}
/*
////////////////////////////////////
/////////// CONTACT TEXT ///////////
////////////////////////////////////
*/
.firstsection .contact-text {
margin: 15px 0 0 0;
}
.firstsection .contact-text p {
margin: 0;
font-size: 40px;
font-family: 'Jura';
}
.firstsection .contact-text p a {
font-size: 40px;
font-family: 'Jura';
}
.firstsection .contact-text p a:hover {
text-decoration: underline;
color: #CF5C3F;
}
/*
////////////////////////////////////
//////// HANDLE THE FOOTER /////////
////////////////////////////////////
*/
.mainfooter {
width: 100%;
height: 200px;
float: left;
background-color: #022930;
color: white;
}
.mainfooter a { color: #FFF }
.mainfooter .top-row {
width: 100%;
height: 50%;
}
.mainfooter .bottom-row {
width: auto;
height: 50%;
}
.mainfooter .top-row h1 {
padding-top: 1%;
padding-bottom: 3%;
}
.mainfooter p {
font-family: 'BebasFont';
}
.mainfooter .top-row .short-text {
padding-left: 15%;
float: left;
margin: 5px 0 0 0;
}
.mainfooter .bottom-row .copyright {
padding-left: 15%;
margin: 5px 0 0 0;
}
/*
////////////////////////////////////
/// HANDLE PHONE/SMALLER SCREENS ///
////////////////////////////////////
*/
@media only screen and (min-width: 150px) and (max-width: 600px) {
.body {
width: 90%;
font-size: 95%;
}
.mainheader img { width: 30% }
.mainheader nav {
background: #666;
height: 200px;
line-height: 30px;
margin-bottom: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
padding-left: 0;
}
.mainheader nav li {
width: 100%;
margin-left: 0 auto;
}
.mainheader nav a:link,
.mainheader nav a:visited {
color: #FFF;
display: block;
height: 30px;
padding: 5px 0;
text-decoration: none;
}
.mainheader nav a:active,
.mainheader nav .active a:link,
.mainheader nav .active a:visited {
background: #CF5C3F;
color: #fff;
text-shadow: none !important;
}
.mainheader nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.content {
width: 100%;
float: left;
margin-top: 2%;
}
.top-content {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottom-content {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2px;
}
}
让这6个盒子至少响应平板电脑视图（同时保持相同的布局），然后一次为手机垂直放置1个盒子，这几乎是我在几乎完成之前必须处理的最后一个问题网站。
我也注意到（正如你在第二个方框中看到的那样）如果我将标题名称改为任何东西，它会搞砸盒子的布局。
无论如何请帮助:(我尽我所能。
2 个答案:
答案 0 :(得分：0)
不要使用浮动框，使用CSS table或flexbox：
示例HTML
＆＃13;
＆＃13;
＆＃13;
＆＃13;
* { margin:0; padding:0; }
/* css table */
.box { display: table; border: 1px solid #000; background: #ccc;}
.box>div { display: table-cell; }
.box-img { width: 150px; background: url(http://www.fillmurray.com/150/150) center no-repeat; }
.box-text { padding: 10px; }
/* flexbox */
.flexbox-box { display: flex; align-items: center; border: 1px solid #000; background: #ccc;}
.flexbox-box-img { flex: 0 0 150px; height: 150px; background: url(http://www.fillmurray.com/150/150) center no-repeat; }
.flexbox-box-text { flex: 1 1 auto; padding: 10px;}<div class="box">
<div class="box-img">
</div>
<div class="box-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et elit id justo porta interdum. Cras elementum, arcu eu pulvinar maximus, massa ipsum gravida risus, eget ultricies libero augue sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget pharetra dolor. Quisque lobortis porttitor molestie. Aliquam non sagittis lorem. Proin faucibus magna
</div>
</div>
<div class="flexbox-box">
<div class="flexbox-box-img">
</div>
<div class="flexbox-box-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et elit id justo porta interdum. Cras elementum, arcu eu pulvinar maximus, massa ipsum gravida risus, eget ultricies libero augue sed magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget pharetra dolor. Quisque lobortis porttitor molestie. Aliquam non sagittis lorem. Proin faucibus magna
</div>
</div>
答案 1 :(得分：0)
/* for 700px or less */
@media screen and (max-width: 600px) {
#content {
width: auto;
float: none;
}
#middle {
width: auto;
float: none;
margin-left: 0px;
}
#sidebar {
width: auto;
float: none;
}
}
<强> FIddle Demo
注意：原型已在Fiddle中显示。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？