个人中心
gpt4 book ai didi

css - div布局问题。解决

转载 作者：行者123 更新时间：2023-11-28 13:46:00 27 4
gpt4 key购买 nike

好吧，我制作的每个页面都有这个问题。我不确定我做错了什么，但我所有的页面都不适用于所有分辨率。可能是因为我使用的是宽屏？大声笑我不确定，但在小于宽屏分辨率的情况下，它永远不会看起来正确。它的某些部分你看不到，所以你必须滚动到一边，或者在这种情况下，内容比 div 延伸得更远。一个例子是 larzconwell.com

所以这是代码。如果您能帮我解决这个问题，我将不胜感激。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Tinos' rel='stylesheet' type='text/css'>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">     </script>
<title>Larz Conwell</title>
<style>
/* standard */
body {
    background-color: #333;
color: #ccc;
font-family: 'Tinos', arial, serif;
}
a:link {
color: #CCC;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCC;
}
a:hover {
text-decoration: none;
color: #09F;
}
a:active {
text-decoration: none;
color: #09F;
}
textarea {
    resize: none;
}
/* classes */
.dash {
font-size:20px;
color:#09F;
}
.header {
z-index:1;
float:left;
background:#666;
margin-left:25px;
margin-top:75px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
width:31%;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
box-shadow: 5px 5px 2px #000;
opacity:0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
.menu {
z-index:3;
float:right;
background:#666;
margin-left:25px; /*only applies if floating left */
margin-right:25px;
margin-top:15px;
padding-left:25px;
padding-right:5px;
width:27%;
-webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
box-shadow: 5px 5px 2px #000;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.menuname {
color:#09F;
font-size:20px;
}
.content {
z-index:2;
float:left;
background:#666;
margin-left:25px; /*only applies if floating left */
margin-right:25px;
margin-top:50px;
padding-top:25px;
padding-left:25px;
padding-right:5px;
padding-bottom:25px;
width:60%;
-webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
box-shadow: 5px 5px 2px #000;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
 }

.linkletter {
color: #09F !important;
font-size:50px !important;
}
.linkletter:hover {
color:#000 !important;
font-size:50px !important;
}
.links {
font-size:35px !important;
}
.links:hover {
font-size:35px !important;
color:#000 !important;
}
.footer {
z-index:2;
float:left;
background:#666;
margin-left:25px; /*only applies if floating left */
margin-right:25px;
margin-top:20px;
margin-bottom:20px;
padding:10px;
width:31%;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
box-shadow: 5px 5px 2px #000;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>
<!--disables rightclick-->
<script language=JavaScript>
<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

 var message="Function Not Allowed -Larz Conwell";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// --> 
</script>
<script>
  $(document).ready(function() {
$('div').hide().fadeIn(3500);
  $(".header").draggable();
 });  
 $(document).ready(function() {
  $(".menu").draggable();
 }); 
  $(document).ready(function() {
  $(".content").draggable();
 }); 
  $(document).ready(function() {
   $(".footer").draggable();
  }); 
</script>
</head>

<body>
<!--header area: logo-->
<div class="header">
<p><img src="images/logo.png" width="437" height="158" alt="Larz Conwell" /></p>
<p><span class="dash">//</span>Web Designer & Graphic Artist</p>
</div>
<!-- menus-->
<div class="menu">
<p>Note right now the Portfolio portion of the website does not work and is in      progress.</p>
  <p class="menuname">  //Portfolio</p>
<p><span class="dash">//</span><a href="pages/photography.html">Photography</a>   &nbsp;&nbsp;<span class="dash">//</span><a href="pages/photoshop.html">Photoshop  Creations</a> &nbsp;&nbsp;<span class="dash">//</span><a href="pages/design.html">Designs</a></p>
</div>
<!--content-->
<div class="content">
 <table width="100%" border="0">
 <tr>
  <td width="36%" valign="top"><img src="images/about.png" width="251" height="81" alt="About" /><br />
  Hello I'm Larz Conwell and i reside in Georgia, I am a Freelance Web Designer and Graphic Artist. As of right now i am a senior in high school and i am working on getting better at Web Design as well as Graphic Design. If you would like a web site made or editing done please ask i would love to help, and since im only in high school, for now im doing anything for free. <br /></td>
  <td width="23%" valign="top"><img src="images/contact.png" width="251" height="81" alt="Contact" />
    <form id="form1" name="form1" action="/cgi-bin/cgiemail" method="post" enctype="application/x-www-form-urlencoded">
      <table width="100%" border="0">
        <tr>
          <td height="32" align="right" valign="top">Name</td>
          <td valign="top"><label for="name"></label>
          <input name="name" type="text" id="name" /></td>
        </tr>
        <tr>
          <td height="31" align="right" valign="top">E-mail</td>
          <td valign="top"><label for="email"></label>
          <input type="text" name="email" id="email" /></td>
        </tr>
        <tr>
          <td height="30" align="right" valign="top">Comment</td>
          <td valign="top"><label for="comment"></label>
            <label for="comment"></label>
          <textarea name="comment" id="comment" cols="21" rows="5"></textarea></td>
        </tr>
        <tr>
          <td colspan="2" align="center" valign="top"><input type="submit" name="submit" id="submit" value="Contact Me" /> <input type="reset" name="reset" id="reset" value="Reset" /></td>
        </tr>
      </table>
  </form></td>
  <td width="41%" valign="top"><img src="images/qa.png" width="251" height="81" alt="Questions &amp; Answers" /><br />
    Q: Why should i pick you to make my website?<br />
    A: I am able to make your website however you want and i have good design techniques so it will look great and also have great functionality at the same time.<br />
    <br />
    Q: Why would you make content for people for free?<br />
    A: Mainly because im in high school and i dont have &quot;proper&quot; training, so i feel i should do it for free till i get out of college. Plus, who doesnt like free stuff?    </td>
  </tr>
  <tr>
  <td colspan="3" align="center"><span class="linkletter">F</span><a href="http://facebook.com/larz.conwell"><span class="links">acebook</span></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="linkletter">E</span><a href="mailto:larzconwell@gmail.com"><span class="links">-mail</span></a></td>
   </tr>
 </table>
</div>
<!--footer-->
<div class="footer"><span class="dash">//</span>&copy;2011 All Rights Reserved Larz Conwell &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:larzconwell@gmail.com">E-mail</a></div>
</body>
</html>

提前致谢(:

最佳答案

在您的每个 div 元素上都设置了百分比宽度，这意味着当浏览器窗口小于特定宽度时，您的 div 也会调整大小并且 div 的内容会掉落。这可以通过用像素值替换百分比宽度来解决，你可以试试这个:正确:

  • 宽度:360px;

不正确(导致浏览器调整大小问题):

  • 宽度:30%;

关于css - div布局问题。解决，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5208664/

27 4 0
文章推荐： html - css 反射问题 - 反射图像的错误部分
文章推荐： php - jquery if 语句和 hasClass？
文章推荐： ios - 如何将标题从 UIAlertAction 发送到另一个 UIViewController 作为该 VC 的标题
文章推荐： javascript - D3和鼠标事件，点击测试不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com