让这些响应式方形div彼此相邻

时间：2016-03-24 19:00:55

标签： html css grid skeleton-css-boilerplate

我在一个看起来像这样的网站上工作：

Site

然而，当我调整窗口大小时，我在第三行上的div不能移动时遇到一些麻烦。为了让你知道我在说什么，这里有图片......

正常窗口大小： enter image description here

当我缩小窗口时：

enter image description here

我如何才能使两个div保持与第一张图片中的相同，并且在调整窗口大小时不会改变位置。另外，有什么方法可以让文本与div一起调整大小？

到目前为止，这是我的代码：

＆＃13;
＆＃13; 
@font-face {
    font-family: 'Trend Sans 004'; /*a name to be used later*/
    src: url('fonts/Trend Sans W00 Four.ttf'); /*URL to font*/
}


@font-face {
    font-family: 'Utopia Regular'; /*a name to be used later*/
    src: url('fonts/utopia-regular.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'Trend Sans 001'; /*a name to be used later*/
    src: url('fonts/Trend Sans W00 One.ttf'); /*URL to font*/
}




/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;
    }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
background-color:#C8D7DC;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }





/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#header {
font-size:10vw;
margin-top:5%;
text-align: center;
font-family:'Trend Sans 004';
color: #806239;
}


/* Row 1
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#row1 {
font-family:'Trend Sans 001';
color:#806239;
border: 2px #806239 solid;
margin-top:2%;
padding:1%;
font-size:2vw;
white-space: nowrap;
}

#row1 a:link {
    text-decoration: none;
    color:#806239;
}

#row1 a:visited {
    text-decoration: none;
    color:#806239;
}

#row1 a:hover {
    text-decoration: none;
    color:#806239;
}

#row1 a:active {
    text-decoration: none;
    color:#806239;
}


#row1 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

#row1 li {
    display: inline;
    
}

#row1 li {
    display: inline;
}

#kjn {
padding-right:25%;
padding-left:25%;
}



/* Row 3
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#row3 {
background-color:#806239;
font-family:'Utopia Regular';
margin-top:2%;
text-align:center;
color: white;
padding:5%;
}

#mail {
font-family:'Trend Sans 001';
letter-spacing:2px;
font-size:1.8vw;
}

#first {
margin-top:-5%;
font-size:1.5vw;
letter-spacing:.4px;
}





/* Box Row
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#boxRow {
font-family:'Utopia Regular';
margin-top:2%;
}

#boxRowImg1 {
background-image: url("images/interior.png");
background-color:grey;
background-repeat: no-repeat; 
background-size: cover;
font-family:'Utopia Regular';
width: 48%;
height: 0;
padding-bottom: 48%;
}


#boxRowTxt {
font-family:'Utopia Regular';
box-shadow:0px 0px 0px 3px #806239 inset;
width: 48%;
color:#806239;
position:relative;
height: 0;
padding-bottom: 48%;
}

#boxRowTxt h5 {
font-family:'Trend Sans 001';

font-size:3vw;
}

#boxRowTxt p {
margin-top:-20px;
color:#806239;
font-size:10px;
}

#boxRowTxt hr {
height:1px;
width:40%;
background-color:#806239;
border-width:0px;
}

#aa {
padding-top:20px;
padding-bottom:20px;
padding-left:10%;
padding-right:10%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}



/* hr
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#row5 hr {
height:2px;
width:100%;
background-color:#806239;
border-width:0px;
margin-top:3%;
}

/* Row 6
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#row6 {
font-family:'Trend Sans 001';
margin-top:.5%;
margin-bottom:1.5%;
font-size:1.3vw;
color:#806239;
}
＆＃13; 
<!DOCTYPE html> 

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Cupid's Cafe & Bakery</title>
  <meta name="description" content="Cupid's Cafe & Bakery">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="Cupids.css">
  

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

</head>
<body>

  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <div class="container">
  
  <div class="row">
  <div class="twelve columns" id="header">
  Cupid's
  </div>
  </div>
  
  <div class="row">
  <div class="twelve columns" id="row1">
  <ul>
  <li><a href="#menu">Menu</a></li>
  <li><a id="kjn" href="#about">About</a></li>
  <li><a href="#gallery">Gallery</a></li>
  </ul>
  </div>
  </div>
  
  
  <div class="row" id="boxRow">
  <div class="six columns" id="boxRowImg1" >
  </div>
  <div class="six columns" id="boxRowTxt" >
  <div id="aa">
  <h5>The Cafe</h5></br>
  <p>Like a home away from home, our secluded cafe is the perfect place to relax, work, or settle in with a good book. Make sure to try one of our delicious lunch options or expertly brewed hot drinks. </p>
  <hr align="left" >
  </div>
  </div>
  </div>
  
   
  <div class="row">
  <div class="twelve columns" id="row5">
  <hr width="100%">
  </div>
  </div>
  
  <div class="row">
  <div class="twelve columns" id="row6">
  copyright 2016, emily baker
  </div>
  </div>
  
    
  </div>

<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

请注意此媒体查询：

@media (min-width: 550px)
.column, .columns {
    margin-left: 4%;
}

当窗口大小大于550px时，此查询会添加一个margin-left。你必须调整它来解决你的问题;）

另一种解决方案可能是在宽度非常小的情况下更改布局。例如，将两个div放在100％宽度的一个上面。

您可以使用媒体查询执行此操作。

答案 1 :(得分：0)

对于你的第一个问题，当窗口达到~550px宽时，似乎div会合在一起。更有可能的是，它的骨架会为你做这件事，所以我会寻找一个改变填充或边距的媒体查询。

至于你的第二个问题，是的，你可以在窗口改变大小时改变文本的大小，但是否是你想要的用户是另一个问题。您可以考虑使用该元素的font-size属性的rem或百分比。

相关问题
最新问题