Question

首先，我为我可怕的代码道歉。我正在我的第一个网站上工作，虽然它在桌面上正确显示，但在移动设备上，左边的浮动位于网站的其余部分下面。这是一些主页的代码。任何帮助将不胜感激。

<style type="text/css">
body {
background: #90EE90; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #90EE90, #00FF00); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #90EE90, #00FF00); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #90EE90, #00FF00); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #90EE90, #00FF00); /* Standard syntax */
}
h1{font-family:Montserrat;color:000000;}
p {font-family:Montserrat;font-style:normal;font-weight:normal;color:000000;}
h2 {font-family:'Montserrat', bold;}
h3 {font-family:Montserrat;}
div.member {
    float: right;
    padding: 10px;
}
div.desc {
    float: left;
    padding:0px;
</style>
<body>
<div class="member" align="right">
<h2><u>Social Media</u></h2>
<h3><a href="youtube link">Youtube</a></h3>
<h3><a href="facebook link">Facebook</a></h3>
<h3><a href="twitter link">Twitter</a></h3>
<h3><a href="twitch link">Twitch</a></h3>
<h3><a href="instagram link">Instagram</a></h3>
<h2><u>Member Pages</u></h2>
<h3><a href="name1.html">name1</a></h3>
<h3><a href="name2.html">name2</a></h3>
<h3><a href="name3.html">name3</a></h3>
<h3><a href="name4.html">name4</a></h3>
</div>
<div>
<h1><img src="/images/logo.png" alt="Logo" hspace="20" align="left">Group name</h1>
</div>
<div class="desc" style="height: 300px; width: 700px">
<p hspace="15" align="middle">Description of site</p>
</div>

Answer 1

部件到达页面底部的原因是因为它们位于没有响应的固定宽度容器中。最终没有它们的空间，所以浏览器将它们移到底部。

px单位已修复。您想要使用的是%，以便在窗口较小时保持其宽度比

尝试将网页划分为更大的容器。在这种情况下，我选择了leftSide和rightSide。然后我给了他们%的宽度，最后加100%，然后分别设置为float: left和float: right。

如果您不希望它们始终设置为与所有屏幕宽度相同的宽度比，那么您需要查看media queries

其他一些提示：

除非必须
与上述类似，我建议不要将html属性用于可以用CSS完成的事情。将它们放入CSS可以使您的代码更清晰，更易于阅读。
请考虑将右侧的链接列表设为无序列表ul + li，因为它更适合此类。

body {
  background: #90EE90;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #90EE90, #00FF00);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #90EE90, #00FF00);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #90EE90, #00FF00);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #90EE90, #00FF00);
  /* Standard syntax */
}
h1 {
  font-family: Montserrat;
  color: 000000;
}
p {
  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  color: 000000;
}
h2 {
  font-family: 'Montserrat', bold;
}
h3 {
  font-family: Montserrat;
}
.container {
  width: 100%;
}
.leftSide {
  float: left;
  width: 80%;
}
.rightSide {
  float: right;
  width: 20%;
}
.header img {
  float: left;
}
.center {
  text-align: center;
}

<div class="container">
  <div class="rightSide">
    <h2><u>Social Media</u></h2>
    <h3><a href="youtube link">Youtube</a></h3>
    <h3><a href="facebook link">Facebook</a></h3>
    <h3><a href="twitter link">Twitter</a></h3>
    <h3><a href="twitch link">Twitch</a></h3>
    <h3><a href="instagram link">Instagram</a></h3>
    <h2><u>Member Pages</u></h2>
    <h3><a href="name1.html">name1</a></h3>
    <h3><a href="name2.html">name2</a></h3>
    <h3><a href="name3.html">name3</a></h3>
    <h3><a href="name4.html">name4</a></h3>
  </div>
  <div class="leftSide">
    <div class="header">
      <img src="/images/logo.png" alt="Logo">
      <h1>Group name</h1>
    </div>
    <div class="content">
      <p class="center">Description of site</p>
    </div>
  </div>
</div>

元素在移动设备上的其他元素下滑动

1 个答案: