我有这个html和CSS：
<div style="background-color:Red; width:200px; height:200px;">
<div style="background-color:Blue; width:50px; height:50px; float:right;">aa</div>
<div style="background-color:Green; width:50px; height:50px;">aa</div>
我以为它会把蓝色的盒子放在
浏览 1提问于2011-06-30得票数 0
回答已采纳
1回答
(计算机)网络图的最适当布局
、、、、
我正在尝试开发一个基于HTML/JS的“(计算机)网络图”。我指的是连接到其他盒子的盒子，更重要的是，盒子包含在其他盒子的边界内。
简化用例-解释布局要求
用例是VPC (巨大的盒子)，里面有AZ (2或3个大的盒子互相叠在一起)，子网在每个里面(盒子堆放在一起)，EC2s在里面(很多小的盒子互相叠在一起)。
虽然我尝试了许多方法(见下文)，但我没有为我的图表找到合适的布局，我想知道我的需求是否如此独特，以至于我需要自己的布局。
我想要的是.
我想知道在我的研究中是否遗漏了一些显而易见的东西(就HTML5 5/JS解决方案的选择而言)
我是采取了正确的方法来寻找一个框架，还是
浏览 3提问于2014-01-16得票数 5
我的理解是，当您将"float: left“属性设置为HTML元素时，基本上会执行以下步骤：
属性为"float: left“的元素从正常流中取出。其他元素的定位方式正常，就好像该元素不存在一样。现在，浮动元素在尽可能远的左边和上”被“”断开“，直到它触及页面的边缘或接触到另一个元素的边缘。。
在本例中：
index.html:
<html>
<head></head>
<body>
<div id="boxBlue"></div>
<div id="b
浏览 2提问于2021-02-05得票数 0
回答已采纳
我想将一个框添加到HTML页面中，并以一种非常不寻常的方式对其进行样式设置。我找不到正确的CSS规则或正确的搜索词。一切都是这样的：
this head might ,----------------------.
be quite long and | this box has dynamic |
should wrap to | height and width and |
the next line | sticks to right side |
| |
=============
浏览 3提问于2013-08-07得票数 1
我的问题是为什么在下面的html/css代码“绿色”文本是绿色方框外。是水平定位，因为它应该在绿色的框内，但垂直它是在红色的方框下面。以及为什么蓝色盒子垂直放置在绿色盒子下面，而不是红色盒子下面：
HTML:
<div class="red">Red</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
CSS:
.red {
width: 25%;
height: 50px;
floa
浏览 1提问于2016-02-05得票数 0
我有以下代码：
.navigation{
background-color: #FF0000;
width: 100px;
height: 500px;
float: left;
}
.content{
background-color: #00FF00;
margin-left: 100px;
}
.first{
background-color: #0000FF;
height: 100px;
width: 100px;
float: left;
}
.second{
background-c
浏览 4提问于2011-12-09得票数 2
回答已采纳
4回答
一张向你展示这件事的图片：
我希望分栏化的p的行为类似于非分栏化的p，并且它的文本要围绕div进行整形。
下面是html：
<div>hey, I should float !</div>
<p>Velit porttitor mattis nisi sit magnis nec et nunc pellentesque! Pulvinar est! Nunc massa, dapibus eu etiam ut? Enim eu vut porta scelerisque auctor auctor, integer. Natoque elit?
浏览 1提问于2012-11-20得票数 3
回答已采纳
2回答
下面的标记扩展了容器div (它有一个我想要显示的背景图像)，但是对齐左边的框：
HTML：
<div class="container">
<div class="box"></div>
</div>
CSS
.container{
background-image:url('image.png');
width:100%;
}
.box{
width:100px;
height:100px
}
如果我在盒子上使用float:right或position:absolute;righ
浏览 8提问于2014-12-12得票数 1
回答已采纳
5回答
我对CSS完全陌生。但我正在写一个邮件收件箱，它就像你典型的电子邮件收件箱，其中包含3列的发件人，主题，接收。
我能否获得一些基本的CSS来正确格式化此数据(对齐、分栏等)我可以在此基础上继续发展。
任何很酷的有趣的设计也是受欢迎的。
浏览 11提问于2009-04-25得票数 0
回答已采纳
对于网页网格布局，我决定使用Flexbox。现在我想实现一些“自动功能”，这样以后就可以插入网格框，而无需在HTML中添加类或样式。其中一个特点是使一个盒子的高度总是75%，因为它是宽的--即使这个盒子被调整了，例如，浏览器窗口的大小。当然，如果框内容扩展了75%的高度，它应该(也只有这样)增加其高度以适应内容。为了找到合适的解决方案，我找了好几个小时，但最终还是成功了。所以我想，至少，直到我把内容添加到盒子里。
自动纵横比工作良好，只要盒子是空的。如果我添加内容，75%的宽度总是通过内容的扩展而增加到它的高度上。我做了个小摆弄，清楚地想象出了这个问题：
，可视化以下代码：
HTML-代码：
浏览 1提问于2015-09-20得票数 0
回答已采纳
4回答
我已经创建了一个盒子，我试着把按钮放在盒子的右边。当我这样做的时候，按钮就会出现在盒子下面一半的地方。我怎么才能解决这个问题？
这是
这就是我的CSS的样子
.rightColumn {
margin-bottom: 1em;
border: 1px solid #D4D4D4;
width:500px;
border-radius: 10px 10px 0px 0px;
}
.button{float:right;}
它应该看起来像
Title
Summary
|Find out more|
浏览 2提问于2014-09-21得票数 0
回答已采纳
1回答
我试图了解如何正确地使用:after和:before CSS，并将应用这些样式：
这里的目标是适应固定的宽度和高度的盒子内的父盒(不确定我说的是否正确)。
里面的盒子是经过或溢出的。
无论子框有多大，如何设置父框以进行调整？我这里提到的儿童盒子是深灰色的盒子。
<div class="connections-label">
<div class="connections-avatar"></div>
<h3><a href="">Christian Blanqu
浏览 3提问于2013-08-08得票数 0
回答已采纳
我有以下HTML：
<div id = "container">
<div class="block pink float"></div>
<div class="green block">A</div>
</div>
和以下CSS：
.block {
width: 200px;
height: 200px;
}
.float { float: left; }
.pink { backgroun
浏览 0提问于2012-05-23得票数 4
我正在尝试使用浮点数创建一个无表布局，但我很难让小对象在较大对象的两侧浮动。这个是可能的吗？
下面是我想要做的事情的视觉效果：
更新:我希望能够在文档中的任何时间和任何地方添加新的蓝色框和粉色框，而不必将自定义浮动应用于单个项目.
我在JSFiddle：上保存了实际代码
如果您更喜欢查看原始代码，则如下所示：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; c
浏览 7提问于2011-12-21得票数 0
回答已采纳
------------- --------------------------------------------------
| some text | | some more text, sometimes more, sometimes less |
------------- --------------------------------------------------
|<------------------------- 100% width ----------------------->|
所以我有上面的布局。左边的盒子应该尽可能小，而右边的应该占剩余的空
浏览 5提问于2009-08-19得票数 13
回答已采纳
2回答
我试着把一个小盒子放进我的屏幕中央，我的文字居中很好，只是把我的文字放在一边，但我添加了一个小盒子，以使我的文本更加可见使用不透明度。现在，文本和它所放在的半透明框都在我的一边，浮动不起作用，空白处就像一个奇怪的盒子一样，没有边距。我在这里做错了什么，或者我该如何修复它呢？PS我正在使用的‘技术’，我想，从w3schools网站，这是在我的评论后。
HTML：
<div class="myLinks">
<aside class="myLinks">
<nav class="myLin
浏览 1提问于2014-07-23得票数 0
回答已采纳
5回答
所以我有一个很难解释的问题。下面是显示问题的JSFiddle：
CSS：
#container {
width: 400px;
height: 400px;
}
.div1 {
width: 50%;
display: inline-block;
height: 50%;
background: green;
float: left;
}
.div2 {
width: 50%;
height: 50%;
display: inline-block;
background: blue;
float: left;
}
.div3 {
wi
浏览 1提问于2014-06-20得票数 1
回答已采纳
我们正在设计用于打印的HTML页面，表的要求之一是，无论何时发生分页或分栏，都要生成一个类似于"Continues...“的指示符。在表格下方的分隔符(页面或列)之前和表格的续行标题中，另一个指示，如表格标题和文本“继续”，随后是正常的内容流。
对于顶层容器，我们计划对表使用CSS多列和普通html表元素。似乎CSS列没有公开任何伪类来装饰分栏符。
下面是我正在寻找的布局，
浏览 4提问于2020-05-24得票数 2
4回答
我需要一些帮助来弄清楚为什么我的布局是凌乱的。这就是我正在做的事情:。绿色的盒子应该在紫色的盒子里。我认为这是一个浮动的问题。由于我不完全理解float规则，有人能帮我找出问题并推荐一些好的“旧”文档读物吗？
谢谢!
浏览 1提问于2013-04-08得票数 3
回答已采纳
当div被定义为"inline“时，它的所有维度变量似乎都失效了。
例如
<div id="test" style=" border: 1px solid;padding:3px;width:40px; height:100px;">
foobar
</div>
给了我一个大盒子，但在我添加内联样式后，盒子缩小到最小尺寸。
例如
<div id="test" style="display:inline; border: 1px solid;padding:3px;width:40px; height:
浏览 2提问于2012-05-31得票数 3
回答已采纳
2回答
大家好，我是HTML5 5/CSS的新手，所以我需要一些帮助。
问题是图像不会进入盒子里。
它当前的位置在盒子的左下角。
我想把它放在盒子的左边，把h2和p放在图像的右边，我只想知道我错过了什么
另外，我可以为每个html元素创建一个id吗？它只是似乎有太多的元素，这是皱眉在网页设计吗？如果是的话，正确的做法是什么？
提前谢谢
#featPost {
padding:70px 0px 0px 51.2px;
/* background-color: orange;*/
}
#featPost section {
width: 750px;
height: 261px;
浏览 0提问于2015-05-04得票数 0
回答已采纳
5回答
我的HTML：
<div class="outer">
<div class="inner">
Lorem Ipsum
<div class="innerest">
<!-- no content -->
</div>
</div>
<div class="inner">
Lorem Ipsum
<div class
浏览 0提问于2013-04-26得票数 1
回答已采纳
2回答
我在使用css布局对象时遇到了困难，
由于代表的原因，无法发布图像，因此图像在此托管....
用于每个用div标记的图像的css ive如下所示
#compbox img {
float:left;
margin:5px;
}
#compwinnerbox img {
float:left;
margin:5px;
}
每个盒子等等，尽管我该如何制作底部第三个盒子来填补空白-所以在某种意义上是向上漂浮的？如果我没有解释得太好，我很抱歉。
浏览 2提问于2013-03-30得票数 0
回答已采纳
有没有人知道可以复制的开源JS解决方案
我真的希望能够将内联内容从一个区域流动到另一个区域，以开发类似于杂志的响应式布局。我发现‘分栏’插件创建列没有CSS，但还没有能够找到任何从一个框到另一个框的文本流动。
浏览 2提问于2012-04-02得票数 2
.information {
position: relative;
}
.text {
position: absolute;
left: 0;
padding: 10px 30px 40px 80px;
width: 50%;
background-color: lightblue;
}
ul li {
font-size: 31px;
}
ul {
list-style: none;
}
.contact_info {
position: absolute;
padding: 0 1em;
font-size: 2em;
right:
浏览 0提问于2016-07-11得票数 3
考虑以下片段：
<html>
<head>
<style type="text/css">
#container {
width: 400px;
height: 600px;
background-color: lightgrey;
}
.item {
width: 50px;
overflow: hidden;
white-s
浏览 4提问于2011-12-06得票数 1
1回答
问题很简单。我有一堆要做瓷砖的元素。然而，它们中的一些有较长的高度，比方说是其他的两倍。我希望他们都匹配在一个瓷砖，仅仅通过纯粹的CSS样式。
以下是我所拥有的：
这就是我想要的
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
box-shadow: 0 0 1px black inset;
width: 100px;
display: inline-block;
}
#d1,
#d2,
#d4,
#
浏览 1提问于2013-03-10得票数 10
回答已采纳
好的，2天和多个论坛，哦，重新启动整个css文件。仍然得到相同的结果，所以我总是会有这个问题，似乎直到我，或有人解决了它。
我的导航栏和第一个content+sidebar后面有一个白色的盒子。它把我的侧边栏弄乱了。以及其他事情，因为我改变了一些东西来弄清楚它。我两天前才开始学习CSS，所以现在你知道我为什么会有这个问题了:)。探索一种简单的修复方法
第一张图这个盒子是黑色的。我把所有指定为黑色的项目都改成了白色。盒子变白了。将物品改回黑色，它仍然是白色。第一张图片在banner div的底部有一个紫色的条，但你可以在顶部看到它。
第二张图片是白色的，我把内容涂成粉红色，因为它是白色的，很难
浏览 3提问于2013-12-24得票数 0
2回答
我有以下div布局：
当我把普通的txt元素放在蓝色和橙色的div中时，一切都很好。但是，当我在橙色div ( 31px)中放置一个图像时，蓝色div中的元素被下推大约是蓝色div高度的一半。
(附加信息，当鼠标悬停在firebug中橙色div的html上时，似乎只有一半的图像包含在其中，尽管肉眼看起来没有问题)。
如果能帮上忙我会很感激，我对盒子的模型还有点生疏。谢谢。
浏览 6提问于2008-11-17得票数 0
回答已采纳
2回答
RatingBar不可点击
、、、、
我正在尝试在我的应用程序中添加一个评分栏，以便人们可以对问题对象进行评分。
下面是我的XML版本的评分栏：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
浏览 2提问于2016-05-01得票数 1
从其他应用程序打开MS Project时，甘特图将关闭大多数任务列表列。如何在MS Project VBA代码中更改甘特图中任务列表区的宽度？
浏览 2提问于2018-06-01得票数 1
我有个CSS
.nav {
width: 200px;
line-height: 50px;
float: left;
}
.content {
margin: 0px 0px 0px 230px;
}
.container {
border: 1px solid red;
}
这是HTML
<body>
<div class="container">
<div class="nav">Some text
<br>more text
&
浏览 0提问于2015-04-22得票数 0
回答已采纳
4回答
有问题与WP 3.0.4不显示我的css样式的水平对齐的4个框( div )内的容器div。注意:在我手工编写的html/php网站上，相同的css样式适用于HTML4.01过渡//EN。但WP 3.0.4显示的是四个从另一个盒子下来的盒子，就像楼梯一样。
顺便说一下，我使用的是FireFox 3.6.13。
CSS：
div .box-container { display: inline;
margin: 0.63em 0pt; padding: 10px;
width: 640px; background-color:
rgb(229, 231, 225); position:
浏览 0提问于2011-02-09得票数 0
3回答
我用HTML做了一个表单，代码如下：
<html>
<head>
<style>
.your-class input{
float:left;
}
</style>
</head>
<body>
<form action="" method="post">
<div class="your-class">
<label><b>aspect ratio:</b></label>
<input ty
浏览 0提问于2021-05-26得票数 0
1回答
我是HTML/CSS的新手，我在玩浮点数。我想做的是，当左边的绿色盒子小于150像素时，它就会被修复(不是屏幕，我的意思是盒子本身)。当你四处游玩时，你会看到每个宽度相对于%移动，我希望绿色盒子像现在一样移动，但是当那个盒子变得小于150 in时，它应该停止变小)。我试图通过增加最小宽度:150 in来实现这一点，但是当布局变得越来越小时，这只会扼杀布局，这样DIV的三个盒子就不再是一行了。
(请忽略这些ID，这只是为了练习)
#a {
width: 100%;
height: 60px;
background-color: #ea0000;
}
浏览 0提问于2016-05-25得票数 1
回答已采纳
我在IE中有一个非常奇怪的问题，我似乎找不到。我有两个盒子，都是向左浮动的，在右边的方框上有一个空白处，以给出两者之间的一些间隔。在Firefox (当然)中，所有显示都是正确的，但是在IE中，当第一次加载页面时，这些框没有分隔(没有边距)。
这是疯狂的部分。如果页面上有任何CSS更改，框将神奇地跳到正确的位置。当我说任何的时候，我指的是任何。我在body标记的字体系列列表中修改了最后的字体名3，并将该框移到正确的位置(这不是一个更改，甚至不会修改页面上任何内容的外观)。
我可以在页面上张贴我的HTML和CSS，但这是相当例行的。我只是想知道过去是否有人遇到或听说过这个问题？顺便说一句，IE8
浏览 3提问于2010-09-23得票数 1
4回答
浮点混淆
、
为什么这个中的橙色盒子没有和我的其他盒子一起漂浮在左边？我确信橙色的盒子应该从流中拿出来，漂浮在蓝色的盒子旁边。我遗漏了什么？
<div class=" wrap clear">
<div class="block pink float"></div>
<div class="block blue float"></div>
<div class="block green"></div>
浏览 6提问于2013-02-27得票数 1
回答已采纳
5回答
即absolute、fixed定位和float属性，将元素从正常流中提取出来。
那么，看一下这个例子：
<div class="pink float"></div>
<div class="blue float"></div>
<div class="green"></div>
<div class="orange"></div>
第一个盒子是向左漂浮的，在正常的流动中流动，所以第二个盒子填满了它们的空间，所以绿盒子就在红色下面。
但是
浏览 2提问于2013-12-09得票数 1
我遇到的问题可以在这里找到：
如果你在Chrome中查看它，你会注意到当你向右滚动时，它会立即停在最后一个绿色框的右边。然而，在FF和IE中(没有尝试过其他的)，它会正确地滚动到最后一个绿色框后面一点。
由于.lane-container的宽度是2000px，而盒子的宽度应该是1700px，所以在最后一个盒子的右边应该多出300px，但在Chrome中却没有。
你知道为什么Chrome的行为与其他浏览器不同吗，以及我如何解决这个问题？
浏览 0提问于2012-10-03得票数 2
回答已采纳
1回答
这是我的网站
有谁知道如何将导航栏放在我的内容将去的白色方框旁边吗？我只想让它与白色的盒子垂直排列，但让它坐在它的左边。谢谢
HTML
<nav>
<div class="nav-container">
<ul class="nav">
<li><a href="index.html"><span class="text">HOME</span></a></li>
<li&g
浏览 1提问于2014-11-25得票数 0
5回答
我在CSS中遇到了一些浮动框的问题。
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div&
浏览 2提问于2015-03-01得票数 1
回答已采纳
2回答
我有一个按类排序的SQL学生列表，这个列表进入TCPDF来创建一个PDF 2列列表。我的问题是我找不到打破这条线的方法。
我所知道的是，一列最多可以有59行。因此，如果下一组不适合，他们应该转到下一列。
理论上是检查实际的线路
$html=$html.'<tr><td width="40"> </td><td width="90"> </td><td width="50"> </td><td wi
浏览 2提问于2012-01-14得票数 0
1回答
我对目前的问题感到不知所措。我想用HTML/CSS定位三个盒子，两个在左边，一个在右边。为了标记盒子的面积，我选择了三个不同的背景:红色、绿色和蓝色。一切正常，但蓝色背景没有显示。我想我一定犯了一个非常愚蠢的错误，但我找不到。
下面是HTML：
.boxupperleft {
float: left;
width: 50%;
height: 100px;
background: red;
}
.boxright {
float: right;
width: 50%;
height: 200px;
background: green;
}
.boxlowe
浏览 1提问于2019-02-09得票数 1
回答已采纳
3回答
HTML：
<div class="block pink float"></div>
<div class="block blue float"></div>
<div class="block green"></div>
<div class="block orange"></div>
CSS：
.block {
width: 200px;
height: 200px;
}
.f
浏览 0提问于2015-08-13得票数 4
我尝试了下面的代码：
div.a {
position: relative;
width: auto;
height: auto;
border: 3px solid #73AD21;
}
div.b {
float: right;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
<div class="a">The outer box;
<div class="b">The inner box</div>
</
浏览 1提问于2017-06-14得票数 0
我有一个组件，它的左侧有一个记分栏。我还有一个处理所有游戏逻辑的游戏服务。如果有新球员加入，我想隐藏记分栏，更改game.service中的球员数组，然后再次显示记分栏。 这是我目前所拥有的： game.component.ts： this.scorebarSub = this.gameService.hideScorebar.subscribe(hide => {
const scorebar = $('#score-bar');
if (hide && !this.scoreIsHidden) {
scorebar.animate({
浏览 22提问于2020-07-04得票数 0
1回答
我有蓝色的盒子向左漂。我有一个橙色盒子的位置:亲戚。
橙色盒子应该把放在里面所以蓝色的盒子应该是漂浮在周围的，橙色的盒子。
这个是可能的吗？暗示？
编辑:我想要能够改变橙色框的位置，只有使用css。蓝色的盒子应该总是漂浮在橙色的盒子周围。而不是隐藏在橙色盒子后面。
非常感谢
浏览 2提问于2012-05-11得票数 1
1回答
我希望找到一种方法来创建一个简单的带有可变高度元素的两列列表，而不用对列使用两个包装器元素，也不需要使用任何javascript。
提到，向左浮动奇数元素和向右浮动偶数元素可能会起作用，但当元素的高度太可变时，它似乎失败了。
<div class="two-column-list">
<div class="element odd">A few words</div>
<div class="element even">A few sentences</div>
<di
浏览 0提问于2013-12-30得票数 1
回答已采纳
我建了四个有内容的div盒子。首先，它是盲目的，没有问题。但是现在，当我想把我的内容放进盒子里，我把一些文字放到第一个盒子里，例如，其他的三个也会减少同样的数量。
第二件事是，有什么方法可以使文本更简洁吗？就像其他三个盒子里的盲文一样。因为在第一个词中，两个单词之间有很大的空间。我听说css中断的事了吗？但我不知道这是不是对的。
.skillcontainer {
max-width: 23%;
min-width: 200px;
display: inline-block;
position: relative;
margin-left:1.4em;
}
，你能明白我的意思。还有文本，例如，
浏览 5提问于2013-09-21得票数 0
回答已采纳
1回答
我正在尝试使用HTML/CSS，我在定位上遇到了一些困难。我要做的是总共有12个框(3行，每行4框)。上面的一行将是不同的红色阴影，第二行将是不同的绿色，下一行将是不同的蓝色。这就是我想出的代码：
html/css：
.square {
height: 250px;
width: 250px;
border: 1px solid #fff;
}
#red > .square {
float: left;
background: #f00;
}
#green > .square {
float: left;
background: #0f0;
}
#b
浏览 0提问于2015-01-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
