Question

我在移动视图中查看我的网站时遇到问题，文本和图像没有对齐，因为它们应该更左边。我尝试过使用@media screen and (max-width: 480px) 它适用于列表如何我的容器类与所有内容和页脚类没有按原样调整大小。

桌面设计： http://mah-webbutv.github.io/assets/material/da280a_inl6_bild1.jpg

我想要实现的目标：移动设计

＆＃13;

body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}



.container{

  margin-left:25%;
  padding:1px 16px;
  height:auto;
}

@media screen and (max-width: 480px) {

    ul {
        position: relative;
        width: 100%;
    }

    .container{
      margin-left:25%;
      padding:1px 16px;
      height:1000px;
    }

}

div.item {

    vertical-align: top;
    display: inline-block;

    text-align: center;

    width: 520px;
}
.blog {
  max-width: 100%;
  height: auto;
    background-color: grey;
}
.caption {
    display: block;
}

.imgDes {
  margin-left: 180px;
  overflow: hidden;
  text-align: left;
}
.imgDes p {
  text-align: right;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<title>web</title>
<head>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <nav>
  <ul>
    <li><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="htmll logo"></li>
    <li><a class="active" href="#home">Länk 1</a></li>
    <li><a href="#news">Länk 2</a></li>
    <li><a href="#contact">Länk 3</a></li>
    <li><a href="#about">Länk 4</a></li>
  </ul>
</nav>
  <div class="container">
    <h1>Innehåll</h1>
    <div class="item">
        <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"  alt="htmll logo" class="blog">
        <span class="caption">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

        </span>
    </div>
    <div class="item">
        <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="htmll logo" class="blog">
        <span class="caption">

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </span>
    </div>
    <div class="item">

        <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="htmll logo" class="blog">
        <span class="caption">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</span>
    </div>
  </div>
<hr>
<div class="container">
  <div class="slide-content">
    <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" width="400" height="400" alt="Delicious Ideas from AllRecipes.com">
    <div class="imgDes">

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
              </p>

    </div>
  </div>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
</body>
</html>

＆＃13;

Answer 1

如果您希望页脚始终位于页面底部，则应使用position：fixed;而不是绝对的。

Answer 2

此处的关键是在媒体查询中使用margin: 0 auto，这会使元素居中，使其左右边距相等。您还希望从.item中移除固定宽度，或者至少将其设置为较小的宽度，以免它溢出.container。

＆＃13;

body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}



.container{

  margin-left:25%;
  padding:1px 16px;
  height:auto;
}


div.item {

    vertical-align: top;
    display: inline-block;

    text-align: center;

    width: 520px;
}
.blog {
  max-width: 100%;
  height: auto;
    background-color: grey;
}
.caption {
    display: block;
}

.imgDes {
  margin-left: 180px;
  overflow: hidden;
  text-align: left;
}
.imgDes p {
  text-align: right;
}

/* as others have mentioned, you'll need to change this
most likely to position: fixed, unless you want it
just at the bottom of your content, where position: relative
would be OK. Since you haven't asked about it, I've left it
unchanged here */
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

/* moved your media query to the bottom of your styles,
so it successfully overrides the styles set above */
@media screen and (max-width: 480px) {

    ul {
        position: relative;
        width: 100%;
    }

    .container{
      /* margin: 0 auto; is a great trick for centering */
      margin: 0 auto;
      
      padding:1px 16px;
      height:1000px;
    }
    
    /* remove the set width on your items
    could also set to width: 100%, which would be in line
    with general responsive practices */
    div.item {
      width: initial;
    }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<title>web</title>
<head>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <nav>
  <ul>
    <li><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="htmll logo"></li>
    <li><a class="active" href="#home">Länk 1</a></li>
    <li><a href="#news">Länk 2</a></li>
    <li><a href="#contact">Länk 3</a></li>
    <li><a href="#about">Länk 4</a></li>
  </ul>
</nav>
  <div class="container">
    <h1>Innehåll</h1>
    <div class="item">
        <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"  alt="htmll logo" class="blog">
        <span class="caption">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

        </span>
    </div>
    <div class="item">
        <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="htmll logo" class="blog">
        <span class="caption">

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </span>
    </div>
    <div class="item">

        <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="htmll logo" class="blog">
        <span class="caption">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</span>
    </div>
  </div>
<hr>
<div class="container">
  <div class="slide-content">
    <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" width="400" height="400" alt="Delicious Ideas from AllRecipes.com">
    <div class="imgDes">

      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
              </p>

    </div>
  </div>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
</body>
</html>

＆＃13;

Answer 3

两件事：

您应首先设计移动设备，并使用@media查询更大的屏幕。

现在，针对您的问题......乍一看，您似乎已经将div.item的宽度硬编码为520px宽，并且您还没有在媒体查询中包含规则来制作它100％宽。

CSS位置响应式设计移动视图

3 个答案: