如何在一条底线上放置两个div？
在前端开发中，可以使用CSS来实现在一条底线上放置两个div的效果。具体的方法有多种，以下是其中一种常用的方法：
- 使用flex布局：
- 使用flex布局：
- 使用flex布局：
- 这种方法使用了flex布局，通过设置容器的
display属性为flex，并使用justify-content: space-between实现两个div在容器内的水平分布，align-items: flex-end实现两个div在容器内的垂直对齐。同时，通过设置容器的border-bottom属性为1px solid #000可以在两个div之间添加一条底线。 - 使用绝对定位：
- 使用绝对定位：
- 使用绝对定位：
- 这种方法使用了绝对定位，通过设置容器的
position属性为relative，并设置容器的border-bottom属性为1px solid #000可以在两个div之间添加一条底线。然后，通过设置两个div的position属性为absolute，并分别设置bottom: 0、left: 0和right: 0可以将它们放置在底线上的两侧。
以上是两种常用的方法，可以根据具体需求选择适合的方法来实现在一条底线上放置两个div的效果。
相关·内容
我想画一条线，连接屏幕上的两个用户控件，然后在用户控件移动时移动。我创建了第三个名为ConnectingLine的用户控件，然后添加了两个指向用户控件的依赖属性。
我编写了代码，以便ConnectingLine能够引用源代码和接收器用户控件，但现在我遇到了一些问题：
如何计算源和接收器用户控件的位置？我对WPF很陌生，对没有返回Point对象的“头寸”属性感到困惑。如果我能得到两个Point对象，那么我就可以将它们绑定到ConnectingLine中的一条线上：
< Line X1="{Binding ElementName=Me, Path=Source.X}" Y
浏览 1提问于2012-11-20得票数 1
我对css的对中有个小问题:/
我在同一条线上有两个或更多的div，它们的宽度是相等的。所以，如果有2个div，那么1和2 div必须有相同的面积(50%和50%)，这些div应该是中心的。
我下面有个密码，但不起作用。
<div class="main">
<div class="xy">First</div>
<div class="xy">Second</div>
</div>
CSS：
.xy {
display: inline;
ma
浏览 2提问于2014-12-07得票数 3
回答已采纳
我需要在木星笔记本上显示几个开关。我使用以下。
import chess
from IPython.display import display
display(chess.Piece.from_symbol("R")), display(chess.Piece.from_symbol("P"))
得到这样的东西：
问题是这两块都在不同的线上。我需要他们所有人都在同一条线上。我还试图将它们组合在html-string <div style="display: inline">one_piece</div><
浏览 2提问于2017-06-26得票数 0
回答已采纳
我希望两个节点之间的边在一条水平线上是对称的。例如，这段代码：
digraph G {
rankdir=LR
s [style=invisible]
A [peripheries=2]
D [peripheries=2]
B [peripheries=2]
s -> A
A -> C [label="1"]
C -> D [label="0"]
D -> C [label="1"]
A -> B [label="0"]
}
浏览 4提问于2014-01-17得票数 1
回答已采纳
我正疯狂地尝试用div和spans来实现这个简单的设计，而不是使用表、to和trs (到目前为止，我已经使用了表)。
简单设计：
左边的两个物体:向左浮动，垂直中心。
右边1:向右漂浮，垂直送至底部。
所有组件都在同一条线上。
我有点希望这会很容易写，但我发现它非常困难。float标记取消了vertical-align标记，我无法让它在没有样式/div/span组合的情况下工作。
TnX的帮助..。
浏览 6提问于2011-04-07得票数 0
回答已采纳
我有两个按钮，我希望它们在同一条线上。
按钮位于另一个下面，因为一个在<a>元素中，一个在form中。
这是代码
<a href="update/"><button class="btn btn-default">Update Contact</button></a>
<form action="" method="post">
{% csrf_token %}
<button type="submit" class="b
浏览 7提问于2014-02-18得票数 0
回答已采纳
1回答
我花了很多时间想办法解决这个问题。我正在构建一个对话框布局，并试图使标题中心相对于对话框，同时在标题的两边有两个按钮。按钮将是“地心引力”向最左边和最右边。
简单的部分是以对话框为中心，或执行按钮的最左和最右。让他们在同一条线上和睦相处。
简单的思考方式：
标题在对话框中居中
两个按钮在同一条线上独立地左对和右对齐。
对怎么做有什么想法吗？
浏览 1提问于2010-07-22得票数 1
回答已采纳
2回答
一段时间以来，我一直试图让这两个街区站在同一条线上，但都徒劳无功！
你能帮我把这个点亮吗
在这里
<div class="bookinfo">
<h2 id="bleu">Hello,how are you</h2>
<h3 id="auteur">John Jogn</h3>
<h4 id="coll">Kings and Queens</h4>
</div><div class="chapter">
&l
浏览 4提问于2014-02-02得票数 0
回答已采纳
2回答
我用以下代码创建了Bootstrap表单：
<form class="form-inline" role="form" method="GET" action="/startup/searchprojects">
<div class="form-group">
<label class="sr-only" for="keywords">Key words</label> <inpu
浏览 3提问于2014-03-06得票数 2
回答已采纳
5回答
我有两个内部div，它们嵌套在一个包装器div中。我希望两个内部div一个接一个地排列。但到目前为止，他们被安排在同一条线上。
#wrapper{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
}
#inner1{
float:left;
}
#inner2{
float:left;
}
<div id="wrapper">
浏览 4提问于2011-04-15得票数 54
回答已采纳
1回答
我想要在同一条线上的两个按钮中间，然后我想要在同一条线上定位一个选择器，在两个居中按钮的右边。我该怎么做呢？换句话说，如何将元素相对于居中的div定位？
编辑:我希望最终结果看起来像这样：
浏览 1提问于2022-03-25得票数 2
1回答
垂直弯曲时间线
、、
如下图所示，如何实现垂直弯曲的时间线？圆圈是图像和矩形div元素。圆圈与时间线之间有一条水平线，在时间线上有一个点。这个是可能的吗？任何帮助都将不胜感激。
浏览 4提问于2022-05-11得票数 -1
我想知道如何将两个div元素连接到一条线上，这条线甚至有点远，就像这个网站中的一个：
JSFiddle link: https://jsfiddle.net/mcbvb8m2/
对于水平和垂直的div，您将如何做到这一点？任何帮助都将不胜感激！谢谢。
浏览 5提问于2016-06-25得票数 1
回答已采纳
我希望我的spark ItemRenderer能够渲染取决于用户输入的不同数量的图形对象。举个例子，假设我想在一条线上渲染一组椭圆。
我在最近一批ItemRenderers中使用了MXML，我喜欢它的每一分钟，但我不确定如何使用MXML IR来实现上述目标。在Actionscript中，我可以获取省略号位置的列表，并以编程方式在updateDisplayList方法中绘制它们。在MXML中有没有等价物？
谢谢你的帮助!
浏览 1提问于2011-04-27得票数 0
回答已采纳
对于这个问题，我有下面的小提琴：
在父div中有两个内联块div：
<div class="outer">
<div class="inner1">
Y
</div>
<div class="inner2">
X
</div>
</div>
css为父div分配宽度，为子div分配2宽度。
.outer {
width: 210px;
border: 1px solid red;
}
.i
浏览 4提问于2014-10-12得票数 5
回答已采纳
3回答
我试图把两个标签和两个输入放在同一条线上。这有可能吗？
我希望它看起来像这样，在同一条线上：
LabelButton WhiteSpace Label2
到目前为止我拥有的
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="contro
浏览 7提问于2015-12-15得票数 4
回答已采纳
1回答
我想在文本旁边放置一个图像，如下所示：
<div class="views">text<img src="..."></img></div>
这就是结果：
但是它应该看起来像这样：
你知道如何在一条垂直线上定位元素吗？
浏览 2提问于2010-12-17得票数 2
回答已采纳
2回答
我有两个标记，我想在它们之间画一条线，并有一个文本显示线上方的距离，就像在谷歌地图的网页版本中一样。
我已经找到了关于在两个标记之间画一条线的示例，但是如何在这条线上添加文本呢？
浏览 5提问于2015-04-28得票数 8
回答已采纳
我想让我的.screen类独立运行。假设我不能更改当前的布局。
<div class="app">
<div class="screen"></div>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
我原以为disp
浏览 1提问于2020-04-10得票数 0
回答已采纳
1回答
我有一个使用Razor和引导程序的c#项目，其中一个页面中有一个表，其中有几个列。
现在，Bootstrap会自动设置每个列的宽度，以占用表中相等的空间，但是这并不理想。
在我的表中，有些列有更多的信息，需要比其他列更宽。
这种情况不会发生，因此，我最终得到了一个有两个图像的表，一个在另一个上面(当它们应该在一行时)，看起来很可怕。
我解决这个问题的方法如下：
<table class="table table-striped table-bordered">
<thead>
<tr>
浏览 2提问于2015-06-03得票数 2
回答已采纳
1回答
我有一个问题:我希望我的文本“左”向左，我的文本“右”向右，希望它们都在同一条线上。我在CSS中添加了一个text-align，但是它不起作用。我还添加了一个display:inline-block，所以两个不同的divs可以放在同一条线上。我也想增加一个边界之间的网站和文本之间的空白。我尝试了CSS中的width:90%，但是文本在同一条线上。
这是我的HMTL代码
<div class="footer">
<div class="footerleft">
<p>Left1</p>
浏览 0提问于2018-02-09得票数 1
回答已采纳
3回答
我有两个div在一个挠曲盒里。当有足够的水平空间让它们适合在同一条线上时，它们看起来如下：
当我使用css属性flex-wrap: wrap时，两个div将在左浮动时出现在不同的行上：
我希望绿色对齐右侧，但在另一条线上存在，当包装发生在柔性盒中时，就像蓝色的线一样。看起来是这样的：
我怎么用柔性盒来做这个呢？
以下是代码：
.flexbox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.blue {
min-height: 50px;
min-wid
浏览 9提问于2017-06-28得票数 3
回答已采纳
完整代码：
我在为我的博客做主题。
在标题部分，有一个问题。
<div class="post_title">
<br/>
<h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>
<span class="post_cate">나만보기</span>
<span class="post_date">[#
浏览 7提问于2014-07-27得票数 0
回答已采纳
我正在尝试将一个文本居中放置，并在一行中放置一个边框和一个按钮(就像一样)，并且一次又一次失败。我已经尝试了2列布局，单行和两列布局，简单的div，container...etc。谁能帮我把这两个东西放在一条线上。
浏览 15提问于2021-02-18得票数 0
2回答
我试图研究css float的行为。这里有一些连线：。我有一个容器，一个内联span和两个浮动p
<div id="box1">
<span>Box 1</span>
<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
</div>
如果没有span，p1和p2将位于同一条线上。然而，当p1将span压缩到右边时，p2就会放到下一行中！
根据我的理解，p2应该放在p1的右边
浏览 3提问于2014-12-04得票数 1
回答已采纳
问题求解
现在我想定义一个编辑文本到左边，另一个在右边.我试过这样做，但没有起作用。当我做fill_parent..。它只显示一个编辑文本..。在一条线上，当我做wrap_content时，它会显示两个人并排。现在我想做的是..。让两个编辑文本框都定义一定的大小和位置。我尝试实现的方法没有起作用？？
浏览 2提问于2011-10-30得票数 0
回答已采纳
2回答
我有一个包含图像的HTML文件，在这个图像下面，我想在同一行上显示两个div，如下所示：
text1 text2
但不管我怎么尝试，结果都是这样的：
text1
text2
这太烦人了。
<div id="footer">
{% block footer %}
<div class="footercontent">
<d
浏览 3提问于2015-12-07得票数 1
2回答
同线对齐
、
我只是想在同一行对齐一些文本，我的CSS是这样的：
#logo {
width: 600px;
margin: auto;
margin-top: 250px;
}
我的密码是：
<div id="logo">Text Here
<div align="right">Text There</div>
</div>
这就是它所显示的：
你们知道我做错了什么吗？我尝试了第二个div的内联样式，一个padding: 0; and m
浏览 6提问于2014-02-07得票数 4
回答已采纳
我有两个字段product_qty和product_uom，我需要显示product_qty的标签和同一行的两个字段。
我在Odoo论坛上找到了同一个问题的答案，但这并不是我想要的。
<group>
<label for="product_qty"/>
<div class="address_format">
<field name="product_qty"/>
<field name="product_uom"/>
浏览 0提问于2019-04-02得票数 3
回答已采纳
3回答
我很困惑如何把两个div放在同一条线上。我分别使用了float:left和float:right，一个作为div class的两个不同的div id。在课堂上也使用了display:inline。对于这个问题，请给出任何意见。
浏览 4提问于2014-02-05得票数 0
回答已采纳
使用leaflet，在端点坐标已知的两个点之间构建一条直线。我们怎样才能得到这条线上所有点的纬度和经度。
浏览 3提问于2016-05-10得票数 0
9回答
我有以下html
<div class="main-conteiner">
<div class="block">First</div>
<div class="block">Second</div>
</div>
而这个css
.main-conteiner {
width: 600px;
margin: 0 auto;
}
.block {
width: 50%;
display: inline-block;
background:
浏览 6提问于2014-05-02得票数 2
回答已采纳
3回答
是否有拖放解决方案的示例，在拖放解决方案中，被拖动的元素只能沿着一条斜线移动？例如，约束图元的可拖曳能力，使其只能沿30度线或10度线等方向移动。
我所能找到的大多数示例只能将被拖动元素的区域限制在垂直线或水平线上，或者限制在较大的父div内。
可能相关:沿着不超过100px的对角线拖动，或者沿着曲线拖动。
浏览 4提问于2009-10-30得票数 5
回答已采纳
<div style="float: left;
height: 20%;
width: 70%;"</div>
<div style="float: right;
height: 20%;
width: 30%;"> </div>
在Chrome中，这两个部门在同一条线上。但在这两个div之间有一个小差距。但在Firefox中没有差距。为什么会发生这种情况？有什么解决方案吗？
浏览 1提问于2011-07-08得票数 4
回答已采纳
5回答
我有一个html表单和一个div类。两者都由按钮表示，并出现在不同的行中。(一个在另一个下面)。我希望这两个按钮出现在同一条线上。我怎样才能做到这一点？
<div class="form">
<form method="POST" action="{% url 'mytab' %}">
{% csrf_token %}
<button type="submit" name="drilldown_filter" class="
浏览 0提问于2019-06-07得票数 1
回答已采纳
我正在用skobbler构建一个离线驾车旅行应用程序。在应用程序中，有一条用户可以遵循的自定义路线。我可以使用SKPolyline类绘制折线，但如果有一种方法可以直接在折线上指示方向，那就更好了。例如，当你使用skobbler的ForeverMap进行布线时，应用程序会在路线上显示箭头以指示方向。
有什么可能的方法可以做到这一点？
考虑的想法: 1)使用多点路线，我可以用它来连接所有的旅游目的地，并使用提供的方向。但在这一点上，Skobbler似乎不可能做到这一点。2)旋转地图标记以指向方向。Skobbler也不支持这一点。
任何建议都是非常感谢的。
浏览 1提问于2015-02-05得票数 3
2回答
我只是不能让他们在同一条线上，有人知道我能做什么吗？我试图把两个按钮放在最上面的线上，并且都在下面展开--我看过一些关于这个的其他帖子(显示:内联块；等等，可能把它们放在了错误的位置)，但是我似乎无法让它们工作。
这是代码：
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.class
浏览 1提问于2022-03-01得票数 0
1回答
我有一个表行，它通过AJAX/JQuery被附加到表中。行应该有一些文本来描述“类别”是什么，然后有两个按钮(输入标签)在单击时执行特定的操作。它可以工作，除了我不能让文本按照我想要的方式格式化。我希望按钮和文本在行的同一行上，文本在左边。
如果我将文本放在文本中，那么它就会创建自己的行，并将按钮呈现在标签下面。如果我把文本放在一个，那么所有的东西都在同一条线上，但是文本是在按钮的右边而不是左边。我也尝试过许多造型技巧，如显示:内嵌块和垂直对齐:顶部都没有效果。
$('#listOptionsTable').append('< tr >< td >
浏览 1提问于2019-07-24得票数 0
回答已采纳
我在一个WordPress小部件中有一个简单的片段：
<h3>Kevin Smith</h3><h2>The Official Kevin Smith Website</h2>
为了隐私，这个名字被更改了。有没有可能让它们出现在同一条线上？
我是一个CSS虚拟人，但我尝试过这样做：
<div display:inline><h3>Kevin Smith</h3><h2>The Official Kevin Smith Website</h2></div>
但这是不可行的，
浏览 6提问于2014-08-15得票数 17
回答已采纳
我正试图在引导3：中实现这一效果
默认情况下，引导程序使用12列。如果当前行中的所有列宽度加起来超过12，则溢出的列将位于“下一行”的下方。
divs现在看起来是这样的：
<div class="row">
<div class="col-md-4">
...[left window]
</div>
<div class="col-md-6 col-md-pull-1">
...[middle, bigger window]
</div>
<
浏览 1提问于2013-10-24得票数 1
回答已采纳
我有两个标签和两个文本框，我想把这些控件放在一条没有绝对位置的线上。
<div id="divlbluser" >
<asp:Label CssClass="lbl" ID="lblUser" runat="server" Text="نام کاربری:"></asp:Label>
</div>
<div id="divtxtuser" >
<asp:TextBox CssClass="txt" I
浏览 2提问于2014-05-04得票数 1
回答已采纳
11回答
我已经创建了一个新闻横幅和一个按钮作为两个单独的<div>元素，但我发现它们有两行。
我要把他们放在一条线上，怎么做？
HTML：
<div id="outer">
<div>
<div>
<div id="newsbar">news bar</div>
<div id="button"><span role="button"> <input type=
浏览 2提问于2013-10-29得票数 0
回答已采纳
我找不到两个div的例子，一个对左对齐，另一个对右对齐，这两个div位于同一条线上，而不将width设置为它们。我也需要一个有反应的解决方案。有什么想法吗？
.left {
float: left;
}
.right {
float: right;
}
<div>
<div class="right">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2yn
浏览 2提问于2016-06-14得票数 1
回答已采纳
我有两条线，每条线上都有DIV。第一条线上有3个div。在第二行中有2个div，最后一列为空。每个div都设置为内联块，这样它们就可以相邻。
第一行上的第3 div有一个可折叠的链接，当单击该链接时会展开。在同一条线上，div变得比其他的长。
当该div被展开时，它自然地将div向下推到第二行。我希望第二条线上的div不被推倒。我怎样才能做到这一点？
这是我想要达到的目标。
浏览 0提问于2014-06-18得票数 1
回答已采纳
我有一个包含一些项的div。
根据屏幕大小，如何更改这些元素的宽度和高度？
例如，对于min-width: 576px，我需要在同一条线上有两个正方形
<style>
@media (min-width: 576px) {
a.el {
width: 50%;
height: 50%;
}
}
@media (min-width: 768px) {
a.el {
width: 25%;
height: 25%
浏览 26提问于2021-05-23得票数 0
如果你有这样的东西：
<div>
<span> first thing here </span>
<span> second thing here </span>
<span> third thing here </span>
</div>
你想把这些放在一条线上，但是如果整个第三个跨度不合适，而不是把它分成两半，把一部分放在一条线上，一部分放在另一条线上，你希望整个跨度下降到下一条线。
你会怎么做？您是否需要使用javascript来确定是否还有足够的空间？
浏览 1提问于2018-04-06得票数 1
回答已采纳
1回答
在今年(2019) WWDC的一次演讲中，一位演讲者简要地演示了在窗口中拖动编辑器窗格，以重新组织他打开的窗格。当您在其他编辑器窗格之间悬停时，会出现一条细的蓝线，以显示您正在拖动的窗格将到达的位置。(他做了一两个类似的动作，但没有透露他是如何做到的。)我在Xcode的“帮助”或在线上找不到任何东西。reddit上有一些关于Xcode快捷键的帖子，但我没有看到任何关于这个的引用。有人记得怎么做吗？
浏览 3提问于2019-07-24得票数 0
2回答
给定两个点P1(x1，y1)和P2(x2，y2)，cvLine()函数可以绘制一条直线。我坚持的是得到这条线上的点，而不是直接画出来。
假设我画了一条线(绿色) AB和另一条线AC。如果我沿着AB线上的所有像素走，就会在到达B之前遇到黑色像素(包围A的圆圈的边界)。
同样，当沿着线上的像素行进时，AC黑色像素将遇到两次。
基本上，我尝试获取(绿色)线上的点，但cvLine()似乎没有返回任何点序列结构。有没有办法使用OpenCV获得这些分数？
一种相当愚蠢的方法是使用cvLine()在单独的图像上绘制直线，然后在其上找到等高线，然后遍历该等高线的CvSeq* (绘制的直线)以找到点。
浏览 0提问于2011-07-14得票数 10
回答已采纳
我在画布上画了一条线，在drawlinw()方法上传递了两个点。现在我想得到我画的所有直线上的点的列表。我这样做的目的是-我想以一定的间隔在线上画圆圈。
我该怎么做呢？
浏览 1提问于2012-08-28得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
