Fatal编程技术网
  • html/
  • html和css div的位置

html和css div的位置

html css

html和css div的位置,html,css,Html,Css,我正在尝试制作一个包含图像/文本的div的网站，布局如下所示： 我不能张贴超过2个链接，因此文本示例。div位于中间 - - - - - - - 当我将浏览器变小时，div应该在彼此下面排列，如下所示： 但在我的代码中，它将如下所示： 我尝试过各种方法，但没有一种方法能使第一个div在这两种情况下都完美地结合在一起 html来源： <!DOCTYPE html> <html> <head> <link rel="stylesheet" ty

我正在尝试制作一个包含图像/文本的div的网站，布局如下所示：

我不能张贴超过2个链接，因此文本示例。div位于中间

-
- -
- -
- -
当我将浏览器变小时，div应该在彼此下面排列，如下所示：

但在我的代码中，它将如下所示：

我尝试过各种方法，但没有一种方法能使第一个div在这两种情况下都完美地结合在一起

html来源：

<!DOCTYPE html>
<html>
 <head>
     <link rel="stylesheet" type="text/css" href="style.css">
     <title>Sinterklaas website</title>
 </head>
 <body style="background-color:black">
     <center><div class = "secondary"></div></center>
     <center>
         <div class="main">
             <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
                 <tr>
                     <td colspan="2" height="180px">
                         <a href="http://www.google.nl">
                             <img style="display:block;" width="100%" height="100%" src="arduino.jpg" />
                         </a>
                     </td>
                 </tr>
                 <tr>
                     <td colspan="1" bgcolor="blue" width="220px"></td>
                     <td bgcolor="green"></td>
                 </tr>
             </table>
         </div>
         <div class="main" id="second">
             <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
                 <tr>
                     <td colspan="2" height="180px">
                         <a href="http://www.google.nl">
                             <img style="display:block;" width="100%" height="100%" src="arduino.jpg" />
                         </a>
                     </td>
                 </tr>
                 <tr>
                     <td colspan="1" bgcolor="blue" width="220px"></td>
                     <td bgcolor="green"></td>
                 </tr>
             </table>
         </div>
     </center>
     <center>
         <div class="main"></div>
         <div class="main"></div>
     </center>
     <center>
         <div class="main"></div>
         <div class="main"></div>
     </center>
  </body>
任何帮助都将不胜感激

我稍微整理了一下您的html代码，取出了您的表，以便更容易查看结构

这就是你想要的吗

html，正文{ 保证金：0； } 身体{ 背景色：黑色； 背景图片：urlbackground.jpg； 背景重复：无重复； 背景附件：固定； 背景位置：中心； } .包装纸{ 保证金：0自动； 最小宽度：335px； 最大宽度：670px； 文本对齐：居中； } 梅因先生{ 背景色：红色； 显示：内联块； 位置：相对位置； 宽度：300px； 身高：225px； 利润率：15px； } .顶{ 高度：70像素； } @介质最小宽度：680px{ .左{ 文本对齐：左对齐； } }
要解决对齐难题，请从辅助对象中删除“左”属性

但这只是一个简单的解决方案，有许多元素布局决策对您不利。我在这里为您编写了一个修复程序，我认为这将有助于简化正在发生的事情：

添加了一个中心类来环绕所有内容。 使CSS代码具有相关性和可读性。 删除了CSS中的冗余代码。 根据OP的要求进行编辑，阅读评论：

将HTML更改为包含一个要换行的div.secondary div，它现在作为一整行工作。 将.center水平CSS更改为全宽和小屏幕大小。 一个有用的使用CSS，非常有趣和相关。此外，您还可以在许多其他地方模拟代码 身体{ 背景图片：urlbackground.jpg； 背景重复：无重复； 背景附件：固定； 背景位置：中心； 背景色：黑色； } .empty、.main、.secondary{ 位置：相对位置； 显示：内联块； 宽度：300px； 保证金：0自动； } 梅因先生{ 背景色：红色； 身高：225px； 利润率：15px； } .main>表格{ 边界：0； 宽度：100%； 身高：100%； } .中学{ 背景颜色：粉红色； 高度：70像素； } .测试{ 高度：260px； 利润率：30像素； } .空的{ 高度：0px； } 第二{ 背景图片：urlarduino.jpg； 背景大小：100%100%； } .水平居中{ 最小宽度：330px； 宽度：100%； 文本对齐：居中； } .水平居中{ 宽度：100%； }
已弃用，您不应该再使用它。@media查询的位置可能重复？这会将第一个div居中如果页面处于全屏模式，则第一个div必须位于全屏模式下第二个div的正上方，如下所示：当页面变小时，所有元素的位置都是正确的。是，我们需要知道它的宽度应该是2列，并且它们是从上到下包装的。您提供的代码段布局中唯一的变化是，如果页面足够大，可以显示两个collam，则最上面的div必须位于第一个collam的上方。如果页面仅足以显示1个COLLAM，则应将每个div置于彼此下方。如果您查看另一个答案并运行该代码，那么当您可以将一个collum放入browser@user3499284更新了我的答案。这会将所有div放在一起，只有当页面太小而无法显示它们时才应该这样做：我明白了，包装器div本身的好处是，您可以根据自己的需要对其进行修改，例如扩展以适合您的diva或使其成为中心，您认为可以基于此进行工作吗？我对html和css还不是很有经验，是否有任何网站可以帮助我实现这一概念？午餐后，我很乐意提供帮助，即： 
body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}



.main {
  background-color: red;
  display: inline-block;
  position: relative;
  width: 300px;
  height: 225px;
  margin: 15px;
}

.secondary {
  background-color: red;
  position: relative;
  display: inline-block;
  left: -165px;
  width: 300px;
  height: 70px;
  margin: 0 auto;
}

.test {
  background-color: red;
  display: inline-block;
  position: relative;
  width: 300px;
  height: 260px;
  margin: 30px;
}

.empty {
  position: relative;
  display: inline-block;
  background-color: red;
  width: 300px;
  height: 0px;
}

#first {
}

#second {
  background-image: url("arduino.jpg");
  background-size: 100% 100%;
}

#third {

}

#fourth {

}

#fifth {

}

#sixth {

}