个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
正如我在标题中解释的所有内容，然后我将只为你们提供我现在拥有的代码，我一直在努力实现我想要的东西很长时间但没有运气......它表现得像响应式的，但即使调整大小我也想将其保持在原位...截图
<!DOCTYPE html>
<html>
<head>
<title>
Home
</title>
<style>
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
margin: 0 0 0 0;
font-size: 13px;
text-align: center;
}
#content1{
//float: left;
width: 300px;
height: 740px;
margin-left: 50px;
}
#content2{
//float: right;
margin-right: 50px;
width: 300px;
height: 300px;
}
#content3{
width: 740px;
height: 740px;
}
.content{
margin: 20px 100px auto auto;
display: inline-block;
background-color: #F0F0F0;
}
#navbar{
margin: 10px auto auto auto;
min-width: 120px;
min-height: 120px;
}
#navbar-menu{
}
#navbar-menu ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
#navbar-menu ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#navbar-menu ul li:hover {
background: #555;
color: #fff;
}
#navbar-menu ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#navbar-menu ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
#navbar-menu ul li ul li:hover { background: #666; }
#navbar-menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#navbar-menu ul li.active {
background: #555;
color: #fff;
}
</style>
</head>
<body background="../images/bg.png">
<div id="navbar">
<div id="navbar-menu">
<ul><li class="active">Home</li>
<li>About</li>
<li>
Projects
<ul>
<li>Web Design</li>
<li>Web Development</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="content1" class="content">
<h1>ey</h1>
</div>
<div id="content2" class="content">
<h2>eye</h2>
</div>
<div id="content3" class="content">
<h3>eyey</h3>
</div>
</body>
</html>
最佳答案
我已经修改了你的一些 CSS 代码:
CSS:更新
#content1{
width: 20%;
height: 740px;
}
#content2{
width: 20%;
height: 300px;
}
#content3{
width: 40%;
height: 740px;
}
.content{
margin-top:20px;
margin-left:5%;
display: inline-block;
float:left;
background-color: #F0F0F0;
}
将上面的代码替换为您的样式。
关于html - 我怎样才能使 div 与其他 div 相邻，但像屏幕截图中那样将它们保持在原位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30737212/
29
4
0
我想在数组中找到连接(相邻)的元素。 例如，在数组中: [1,2,3,4,5] 要访问所有 2 个连通元素，输出将为: 1,2 2,3 3,4 4,5 要访问所有 3 个连通元素，输出将为 1,2,3
我有三个 Sprite ，彼此堆叠在一起。 我修改了他们的 transform.matrix 以给出他们一致增长的外观。 但是，根据比例因子，瓷砖之间有时会出现小裂缝。 cracks between
我正在阅读有关 Margin Collapsing 的文章，我遇到了这个:margin Adjacent siblings The margins of adjacent siblings are c
float div 的框阴影被其右侧的邻居截断，但左侧未截断。 我玩过 z-index 和 overflow: visible，但没有用。 HTML: CSS: .doc-page {
我有多个元素说卡片。这些卡片需要水平堆叠并且高度需要相同。这正在发生在我身上。 每张卡片都有图像、文本和按钮。每张卡片的图像和文本应采用任何卡片中的最大高度，以便它们正确对齐。这不会发生在我身上。 如
我有这个 GUI 我使用了 GridBagLayout，但我不知道为什么 Plain Bread 复选框与其相应的标签之间有很大的间距。 而且，我尝试仅增加按钮沿 x 轴的间距，但尽管重置了插图，但沿
在过去，我已经为自定义元素符号使用了数百次列表项背景图像，但不知何故从未遇到过这个问题。 基本上，我有一个 IMG float 在无序列表的左侧。元素符号背景图像设置在每个 LI 的左上角。但是， f
我正在使用 Bootstrap 框架并使用 2 列网格。 html 内容有标题、链接、副标题和文本。这增加了该列的高度。我希望它旁边的列与其高度匹配(以便图像显示)没有设置高度图像不显
我有一个 php 代码可以生成数百个 和 标签。我的问题如下，我有以下内容: X X 我想要第二个的边框颜色更重要，以便共享边框显示为灰色而不是黑色。我可以在第二个 td 中使用重要性或继承标签吗？
Place holder for Radio1 Place holder for Radio2 在此，我只想要 与相应的单选按钮相关联是可见的，但是...... * { visibilit
我正在尝试在 html 中实现以下布局。更大的 div 1。然后是它旁边的另一个 div，顶部有一个边距。如果我给 float: left 给第一个 div，给第二个 div margin-top 也
假设我有 2 个名为 IN 和 MASK 的二进制输入。实际字段大小可能是 32 到 256 位，具体取决于用于完成任务的指令集。两个输入都会改变每次调用。 Inputs: IN = ...110
我想知道是否有一种简洁/一行的方法来执行以下操作: pack :: [a] -> [(a, a)] pack [] = [] pack [_] = [] pack (x:y:xs
下面的代码分为两部分，一部分处理头部的管理，另一部分处理“主体”，当我执行代码时引发下面的异常，我该如何解决该错误？我不知道下面的错误是什么原因造成的，错误是在react的解析上 错误: Line
http://imgur.com/a/DA5i4 在上面的两张图片中你可以看到我有一个主容器，里面装满了 3 个较小的 div，一个大的在中间，两个瘦的在两边，但是右边直到中间的 div 下面才开始。
正如我在标题中解释的所有内容，然后我将只为你们提供我现在拥有的代码，我一直在努力实现我想要的东西很长时间但没有运气......它表现得像响应式的，但即使调整大小我也想将其保持在原位...截图
我编写了一个 jquery 插件，它使用 Flot 将 HTML 表格转换为图表。 HTML 是从 XSLT 生成的，在 XSLT 中我有以下代码来调用我的插件。此代码尝试在 blah1 和 blah
我正在尝试实现这样的布局。 aaa xxxxxx oooo aaa xxxxxx oooo xxxxxx xxxxxx bbb xxxxxx cccc bbb xxxxxx cc
在包含网格的 2 个 div 上使用内联 css 显示不起作用 最佳答案 为您的 div 指定宽度并根据您的要求使用“float: left”或“right”。不要对 div 使用“内联” 例如 CS
我将 MVC 项目中的一些代码返回到网页。我无法用撇号解决问题，当我的电话看起来像这样时，我如何忽略它 document.getElementById('some').insertAdjacentHT
我是一名优秀的程序员,十分优秀！