在html中并排显示两个元素
在HTML中并排显示两个元素可以使用CSS的浮动属性或者Flex布局来实现。以下是两种方法的详细说明：
- 使用浮动属性：
浮动是一种常用的布局技术，通过设置元素的浮动属性可以使元素并排显示。可以使用以下步骤来实现：
- 在HTML中创建两个元素，例如
<div>或<span>。 - 使用CSS给这两个元素添加宽度和高度等样式属性，以确定它们的大小。
- 使用CSS的
float属性将两个元素设置为浮动。例如，设置一个元素为float: left;，另一个元素为float: right;，即可使它们在同一行并排显示。
- 在HTML中创建两个元素，例如
示例代码如下：
<style>
.left {
float: left;
width: 50%;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 50%;
height: 200px;
background-color: blue;
}
</style>
<div class="left"></div>
<div class="right"></div>- 使用Flex布局：
Flex布局是一种现代的、响应式的布局技术，可以更加灵活地控制元素的排列方式。可以使用以下步骤来实现：
- 在HTML中创建一个父容器，并给它添加一个类名或ID作为选择器。
- 使用CSS将父容器的
display属性设置为flex，以启用Flex布局。 - 使用CSS的
flex-direction属性设置父容器中子元素的排列方向。例如，设置为row可以使子元素横向并排显示。 - 给子元素添加宽度、高度和其他样式属性以确定它们的大小和外观。
示例代码如下：
<style>
.container {
display: flex;
flex-direction: row;
}
.left {
width: 50%;
height: 200px;
background-color: red;
}
.right {
width: 50%;
height: 200px;
background-color: blue;
}
</style>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>以上两种方法都可以实现在HTML中并排显示两个元素。具体选择哪种方法取决于你的需求和布局要求。腾讯云目前没有直接相关的产品和介绍链接地址与此问题相关。
相关·内容
9回答
我感兴趣的是看到一个很好的diff算法，可能是在Javascript中，用于呈现两个HTML页面的并排比较。我们的想法是，diff将显示所呈现的HTML的差异。
为了清楚起见，我希望能够看到渲染输出的并排差异。因此，如果我删除一个段落，并排视图将知道如何正确地间隔。
@Josh就是这样。尽管它可能会将删除的文本显示为红色或其他什么。这个想法是，如果我使用WYSIWYG编辑器编辑我的HTML内容，我不想切换到HTML来做差异。我想用两个WYSIWYG编辑器并排来做。或者至少在终端用户友好的问题上并排显示不同之处。
浏览 44提问于2008-08-28得票数 88
回答已采纳
3回答
我有两个HTML表，这将是理想的并排放置在屏幕上。宽屏显示器可以解决这个问题，但在大多数老式显示器上，桌子太宽了，不能并排摆放。因此，我想使用css (如果可能的话，甚至只使用HTML )来并排放置表格，只有在分辨率足够高的情况下。
这通常会自动处理图像，但是有没有一种方法可以用在表格上呢？
浏览 0提问于2008-12-31得票数 0
回答已采纳
3回答
我正在使用html和css对两个表单进行正确的定位。我已经尝试了float和display:inline-block，但使用其中一种方法只能让其中的一半正常工作。
我的目标是让这两个表单并排显示在DIV中，该DIV仅占页面的70%，每个表单占用50%的可用空间。这两个表单都需要有最小的宽度，如果没有足够的空间将两个表单并排显示(即在纵向模式下在手机上显示页面时)，则应将其推入单独的行中。
如果我浮动包含表单的两个DIV，它们会并排显示，但不能正确居中(因为它们是左右浮动的，我需要将每个DIV的大小设置为40%，否则它们不能相邻放置)。如果我使用display:inline-block，那么DI
浏览 2提问于2015-05-16得票数 5
我想在iPython中并排显示2个PNG图像。
我的代码是：
from IPython.display import Image, HTML, display
img_A = '\path\to\img_A.png'
img_B = '\path\to\img_B.png'
display(HTML("<table><tr><td><img src=img_A></td><td><img src=img_B></td></tr></tab
浏览 804提问于2018-05-28得票数 15
回答已采纳
3回答
在我的asp.net MVC Razor视图中有以下代码：
<p>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.GroupID)
@Html.Partial("_CreateOrEdit", Model)
<input type="submit" value="Save" class="btn btn-primary"/>
}
@us
浏览 0提问于2013-07-11得票数 1
4回答
我有两个块在一个块内需要显示-内联，但它不工作时，我给予显示内联。
小提琴：
我需要两个街区并排显示，而不是重叠。
HTML：
<div class="outer-container">
<div class="inner-container">
<div class="innermost-container" />
<div class="innermost-container" />
</div>
</div&g
浏览 5提问于2013-12-10得票数 1
回答已采纳
4回答
我的CSS：
body
{
font-family:verdana;
line-height:1.5em;
color:#666;
font-size:0.8em;
}
.objectAttributesOuter
{
border: 1px solid #999;
padding:6px;
margin:6px;
background-color:#EDEEFA
}
.objectAttributes
{
padding: 5px, 0px, 5px, 5px;
}
.whiteBoxWithBorder
{
浏览 1提问于2012-07-20得票数 1
回答已采纳
我将一个child-html-page加载到一个colorbox (jquery插件)中，以便在显示图像时获得lightbox/modal效果。但我希望这个html在一个div中有一张图片，在它的右边有另一个div用于评论。
我在想两个并排的div。两列，但不是表。照片放在其中的一个里面。缩放以始终适合(无滚动或隐藏)和另一个具有匹配高度和固定宽度的div。
我遇到的一个问题就是并排放在div上。我没有缩放图片，而是将两个div放在不同的“行”上。第一个推倒另一个。
有什么方法可以让它们保持内联并缩放图片的宽度呢？我尝试过向左/向右浮动，跨度，但我无法实现。
浏览 1提问于2014-05-20得票数 0
我使用float= left并排放置了两个div元素；但是按钮显示在div元素旁边。我想要按钮元素下面的两个div元素，这是并排放置。
浏览 2提问于2014-02-11得票数 0
当我想同时显示html时，我使用UI区域指定左侧显示一个html，右侧指定显示第二个html。但由于它们具有相同的背景图像，因此屏幕的左右两侧都出现了相同的图像。任何方式，我可以做相同的图像作为共同的背景，同时显示并排。任何方式，我可以把一个简单的html文件与背景图像下面，设置透明度的bg图像两个文件为1，并显示他们之上的平原html？请帮帮忙。
浏览 2提问于2022-05-13得票数 0
5回答
我想并排显示图像和文本(图像在左侧，文本在右侧(使用排序)。
我在visual studio的.html页中实现了这一点。
对于图像div，我给了float: left；对于文本div，我给了float:right
我希望通过将html页面代码传递给一个字符串变量并在WebBrowser中显示输出来实现同样的目的。
例如：
string html= @"<div style=""float:left"">
<img src=""smiley.jpg"" alt=""smil
浏览 0提问于2015-07-14得票数 0
在我的页面中，我使用了这个链接中的可编辑html表示例：，它没有任何问题，当我单击表中的一个单元格时，它会将其更改为文本框。
但是，我不得不更改页面的布局，在这里，我必须将上面提到的示例放在另一个html表(嵌套)中。
现在的问题是，当我单击单元格时，它没有标识包含数据的子表，我想单击，但它单击父表的单元格，在本例中它是父表，包含两个不同的表。
所以，我要你帮忙的是：
获取一个方法，以便在单击子表时标识该子表的单元格
或
以某种方式对齐我页面上的两个表，使之并排对齐。目前，我正在使用父表对齐我的其他两个表，以并排坐。
如果第二个选择更容易实现的话，我不需要做太多的改变。
浏览 2提问于2013-08-25得票数 0
回答已采纳
我正在使用PhoneNumberField库。但是当我访问该字段并提供bootstrap类时，布局发生了变化。它在一行中显示PhoneNumberPrefixWidget，在另一行中显示PhoneNumberField。我想让它们并排显示。我尝试使用for循环，但我仍然无法得到我想要的东西。
forms.py
phone_no = PhoneNumberField(
widget=PhoneNumberPrefixWidget(attrs={'class': 'form-control'})
)
在settings.py中
PHONENU
浏览 2提问于2021-05-07得票数 0
在我的身体里，我想要两个内容并排的div，每个都有50%的屏幕宽度。但是我希望能够隐藏/显示第一个div，然后第二个div宽度响应这个变化，将它的宽度更改为100%或50%。根据第一个div是否被隐藏，填充身体或身体的其余部分。
有什么办法吗？(我知道如何使用jquery显示/隐藏，我想到了HTML)
浏览 3提问于2014-03-05得票数 0
回答已采纳
<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
}
#right {
width: 50%;
background: orange;
display: inline-bl
浏览 95提问于2013-08-16得票数 90
回答已采纳
3回答
我有两个div，我试着并排定位，但有麻烦。我知道div是块元素，但我从来没有遇到过将它们并排放置的困难。
HTML：
<div class="contact">
<div class="team" id="staff-1">
<div id="DIV_2">
<img id="brian" src="../img/brian.png">
</div>
</div
浏览 2提问于2014-02-03得票数 0
回答已采纳
2回答
我试图让两个DIV并排在一个带有溢出的较小的DIV中:隐藏；我希望两个DIV并排在一起，并隐藏一些DIV的内容，因为它们的父DIV宽度较小。相反，最后一个DIV在另一个DIV下移动，即使是它们都有float:left；
HTML：
<div id="wrapper"> <!-- wrapper -->
<div id="nav"> <!-- nav -->
</div> <!-- /nav -->
<div id="container">
浏览 2提问于2014-10-28得票数 0
回答已采纳
有没有可能在不使用css的情况下在html中并排创建两个div？
我找不到任何解决方案，并以某种方式相信，这是不可能的纯html。
我没有机会使用css，因此唯一的解决方案只有html是必需的。
浏览 0提问于2020-10-18得票数 0
2回答
我不能理解css是如何工作的，这让我很恼火。我试着并排做一些基本的事情，两个div和一个div在它们下面。起初，我知道我必须为两个并排的div提供float:left。出于好奇心，我没有给出float:left作为并排的第二个div，我偶然发现了这个布局：
然后我在第二个并排的div中使用了float:left，我遇到了这个布局：
问:我没有为第三个div提供float:left，但它的行为不像第一个屏幕截图。为什么？
css代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cont
浏览 13提问于2019-08-10得票数 0
回答已采纳
2回答
我有一堆格式化为内联块元素的小表。在浏览器中，它们按预期并排显示，但在使用mPDF输出它们时，它们会在每个表后断开。无论我如何格式化它们，它们总是在表格之后断开。mPDF有没有让元素并排堆叠的诀窍？
我正在从页面中提取确切的HTML，并通过AJAX发送它
下面是浏览器和pdf视图的示例。
我的mPDF生成器页面如下所示：
<?php
include("mpdf60/mpdf.php");
$html = $_POST['html'];
$mpdf=new mPDF('utf-8', 'A4');
$m
浏览 6提问于2015-05-31得票数 5
我无法将两个Div并排对齐，就像表格中的两列一样？有时它们会正确对齐，但有时右边的Div会显示在左边的Div下面，如果我刷新页面，div会返回到原来的位置。
如何配置它们，使div始终并排出现？
谢谢
浏览 0提问于2009-08-10得票数 1
我正在一个电子商务网站上工作，我有一个显示产品网格的页面。有两个按钮并排。其中一个包含到post的链接，而另一个则打开一个内有文本区域的对话框。(见图)
图像1
图像2
现在，我想要的是当我单击GETLINK按钮按钮时，它必须接受视图按钮的href属性并填充到textarea中。但是，我在第一产品的链接中得到的东西，即使我点击了其他的get链接按钮。
以下是JS代码：
function opengetlink(){
var sacprodlink = document.getElementById("sac_prod_link").href;
浏览 0提问于2018-03-12得票数 0
4回答
以下是html编码：
<div>
<section class="aboutus">
<div>Some content 1</div>
<div>Some more 1</div>
</section>
<section class="tripinfo">
<div>Some content 2</div>
<div>Some
浏览 2提问于2017-11-22得票数 1
回答已采纳
3回答
我想并排展示两张桌子。我的html显示了正确的结果，但是当我使用TCPDF将html更改为pdf时，表不会并排显示，因为TCpdf中不支持浮动属性。请告诉我如何使用tcpdf并排显示表格。我的html如下所示
<table style="float:left">
<tr>
<td>
</td>
</tr>
</table>
<table style="float"left">
<tr>
<td>
<
浏览 2提问于2017-03-05得票数 3
1回答
Pascal的合并排序示例
、、、、
我的老师给我写了一篇关于如何在Pascal中合并排序两个数组的作业。
其中一个数组名为N，排序为升序。
其他数组名为M，排序为降序。
它们是预定义的，他想让我合并排序，这两个数组。
N [ 2，4，5，8，10 ]
M [ 9，7，6，3，1 ]
合并排序[ 1，2，3，4，5，6，7，8，9，10 ]
那我该怎么做呢？
有人能用简单的编码例子来解释合并排序算法吗？
浏览 5提问于2015-04-08得票数 2
回答已采纳
我需要一个html选择选项(带有选项"size“)，以便将其形象化为一个5行文本区域)并排显示，如下面的jfiddle所示。
我可以用这个css实现我的目标
select {
width: 100%;
}
select#myselect option {
width: 6%;
float: left;
border: 1px solid;
text-align: -webkit-center;
border-color: darkgray;
}
但它只在铬上工作得很好。在firefox中，"float:left“选项似乎不起作用
浏览 3提问于2017-10-28得票数 0
我试图弄清楚如何准确地添加两个按钮并排。该按钮将是用户单击的图像，然后转到URL。我尝试在CSS中添加一个带有内联显示的类，并在一个按钮上添加html调用该类，并添加了一个额外的样式标记。不过，它并没有显示按钮。
如果我需要并排的按钮，那么如果不直接在html代码中添加样式标记，我就不知道怎么做。这是我知道如何显示它的唯一方法:内联；。
我就是这样做的：
CSS
.storebtns {
display: inline;
}
HTML
<a class="storebtns" href="http://www.google.com" style=&
浏览 5提问于2013-10-09得票数 0
回答已采纳
3回答
我创建了两个视图块“新闻”和“博客”，它们并排驻留在我的头版上。
这两个视图都有20个内容(但可以是任意数字)和一个寻呼机。如何在视图块中显示内容，使两个视图以相同的高度结束，而不管显示的内容数量如何。
浏览 0提问于2014-03-31得票数 0
回答已采纳
2回答
我想要做的非常简单:我希望我的leaflet控件在行中并排对齐，而不是按列垂直对齐(就像leaflet自动做的那样)。
下面是一些简短的示例代码：
library(shiny)
library(leaflet)
shinyApp(
ui <- fluidPage(
leafletOutput("map", width = "100%"),
tags$head(tags$style(HTML(".leaflet-control-layers-overlays {width: 190px;}")))
),
浏览 2提问于2017-03-03得票数 3
3回答
我有一个页面，显示两个链接并排。这可以在除IE6之外的所有浏览器上运行。。有谁知道为什么会发生这种情况，以及如何修复它？
在IE6上的结果：
浏览 0提问于2012-08-27得票数 0
回答已采纳
3回答
我正在尝试创建一个可滚动的div，应该可以并排显示3个div。下面是我的html代码，下面代码的问题是它没有并排显示3个div而是一个接一个地显示。
<div id="myDIV2" class="mygrid-wrapper-div">
<h1>This is scrollable div </h1>
<div class="row row-list">
<div class="col-xs-4">
浏览 0提问于2018-01-08得票数 0
我想上传一张照片到FB使用FB PHP SDK，它有两个空格字符并排，但显然与HTML只有一个空格字符显示。在提要帖子上使用Javascript SDK，我可以使用“”+“”来实现这一点，但如果我使用PHP SDK提交照片消息，它会在结果中显示确切的字符“”(在HTML中)。
浏览 2提问于2013-03-12得票数 0
我在CSS上有这个div：
#bodycontent {
max-width:980px;
margin:auto;
}
#navleft {
width:18%;
border:0px;
float:left;
}
#rightcontent {
max-width:80%;
border:0px;
float:right;
}
在HTML上：
<div id="bodycontent">
<div id="navleft">
some
浏览 1提问于2013-02-11得票数 4
回答已采纳
2回答
我正在做一个具有响应性的布局和浮动的练习。在我的布局中，我有四个使用浮点数并排显示的部分。一个小的，然后一个大的，再多两个小的。对于较小的屏幕大小，我希望“大”部分向上移动，并首先显示，采取全宽度。
这三个小部分应该并排在大段下面。我不知道如何改变各节的顺序，所以第一个小部分可以和另外两个部分连在一起。如何用CSS将大的部分向上移动(或向下移动第一个小部分)？
section {
height: 350px;
width: 19.4444%;
float: left;
border: 1px solid black;
}
.big {
width: 41.6666%;
浏览 3提问于2022-07-01得票数 0
1回答
我想使用zenity在bash中编写一个脚本。我的想法是让两个对角线并排打开:一个是与用户交互，另一个是显示结果。是否可以设置这些对话框的位置以避免对话框重叠？
浏览 1提问于2017-04-20得票数 0
回答已采纳
3回答
是否可以切换属性之间的显示和隐藏按钮单击(编程)？例如，我有一张带有地图和列表视图的卡片。这些通常是并排显示的。在移动设备上，但为列表视图，flex = 100增加。地图不再显示。然而，用户应该有可能在这两个视图之间切换。我怎么能这么做？
我的示例标签：
<md-card flex-gt-xs="40" flex-xs="100">
<list></list>
</md-card>
<md-button>toggle Views</md-button>
<md-card flex
浏览 4提问于2016-07-12得票数 2
回答已采纳
我在一个网站上工作，该网站在父元素中并排放置两个元素(我使用float:left和float:right来控制它们的位置)，但是除非我将父元素设置为position:absolute，否则父元素不会显示出来。我不能这样做，因为我正在做一个页脚在网站底部，而父元素将在一个可变的高度。
HTML
<div id="wrapper">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
</div>
<
浏览 0提问于2015-01-25得票数 1
回答已采纳
我希望通过鼠标单击将元素放在页面上，用户单击的位置正好。因此，我通过.append()向div输入了一个字符串。
问题是：如何在不影响其他元素的情况下向div中输入两个元素。我试过绝对的位置，靠上边和左边的位置，但没有结果，
在这个中，我简化了我想要做的事情，通过单击generator1和generator2，页面上应该并排显示两个按钮，但每个按钮都显示在一行上。
嗯，另一件事：“我是CSS中的n00b”;)
浏览 2提问于2012-06-24得票数 0
回答已采纳
3回答
我想要一个导航栏(#nav)，并且每个导航项目都是一个div (#nav div)。然而，这并不能很好地工作。这是我正在尝试的：
#nav {
background: url("navbg.png"); /* navbg.png is 1x40 pixels */
height: 40px;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
text-align: center;
}
#nav div {
width: 200px;
浏览 1提问于2012-12-21得票数 1
回答已采纳
1回答
CSS更改要在缩放时堆叠的图像
、、、、
我有一个包含两个图像的菜单页面。基本上，我希望图像在web浏览器上并排显示(居中)，当在移动视图中时，我希望它们出现在彼此的顶部(以列居中)。因为当图像在移动视图中并排显示时，它们太小而无法点击。 我一直在使用framework7样式表行和列类在web浏览器上并排放置图像。 <div class="row">
<div class="col-50">
<a href="page1.html"><img src="css/images/image1.png" heig
浏览 16提问于2019-04-30得票数 1
1回答
希望在加载图像时不让浏览器重新显示屏幕而显示2个响应图像。我目前正在使用这个答案中的一个修改版本：
下面是单个响应图像的小提琴：
HTML
<div class="image-wrapper" style="max-width: 608px; ">
<div style="padding-bottom: 49.34%; "> <!-- Height / Width -->
<img src="http://met.live.mediaspanonline.com/asset
浏览 2提问于2015-08-03得票数 1
回答已采纳
当我第一次学习HTML时，有人告诉我，如果要使用float:left并行浮动2个div，就必须为这两个元素设置一个宽度。这是因为div在默认情况下是块元素，它将占用它可用的全部宽度。
由于我已经构建了各种项目，我遇到了一些情况，在不设置宽度的情况下，浮动无法工作，但在其他情况下，似乎不需要宽度，浮点数本身将限制元素的宽度。
例如，下面的显示两个元素仅使用float属性并排浮动，不需要宽度。
<style>
.left{
background-color:yellow;
float:left;
}
.right{
浏览 2提问于2015-04-22得票数 10
回答已采纳
我想要的是两个div并排在一起，其中一个是一个图像，另一个是两个div，一个高于另一个。
这恰好是Wordpress的主题，但我很确定这是一个基本的CSS问题。
Wordpress堆栈交换告诉我这是个离题的话题。
调用左div #divL和右div #divR。
我在提到这个问题时找到了答案，我应该将display of #divL和#divR设置为inline-block。我可以让它在我单独创建的测试html文件上工作，但是它在wordpress头中不起作用。具体来说，wordpress标题中的div、#divL和#divR表现得好像有display: block，而不是并排放置。
将它们更
浏览 0提问于2019-01-07得票数 0
回答已采纳
这是我的代码
app.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('student',{
url: '/student',
views: {
'list': {
templateUrl: 'list.html',
controller:
浏览 1提问于2016-03-03得票数 1
5回答
我正经历着HTML标记的奇怪行为。当我把两个按钮并排放在一起的时候，它们之间似乎有一个4px差距，不知从哪里冒出来。
下面是一个，它显示了这个问题。
从下面的图片中可以看到，FireBug显示了gap既不是margin也不是padding (因为padding将以紫色显示)。
请注意:我在Windows8.1上使用Firefox的最新版本，我也尝试使用Eric的CSS重置，但差距仍然存在。
这不是一个真正重要的问题，但很高兴知道它是否正常，以及是什么原因造成的。
浏览 2提问于2014-11-15得票数 11
回答已采纳
1回答
剑道风格问题- UI元素不合适
、、、、
我在一个Angular MVC项目上有一个Kendo DropDownList。Chrome (版本40.0.2214.111m)和IE10将其并排渲染为2个元素。这个问题仍然存在于所有带有两个HTML元素的Kendo元素中，比如NumericTextBoxs。这是一个bug吗？有什么办法可以解决它吗？
这是HTML的外观：
下面是我声明下拉列表的方式
<div class="col-md-3">
<h4>Name: </h4>
<select kendo-drop-down
浏览 4提问于2015-02-16得票数 1
2回答
我在html中有两个表格，并想在它们之间添加间距。虽然我不知道是怎么回事。我在html和css是新手，非常感谢你的帮助。
<div class="test"> <div class="col-12"> <div class="row">
<table><tr><th>Price</th>{% for l in co %}<td>{{l}}</td>{% endfor %}</tr></table>
<ta
浏览 1提问于2020-07-16得票数 1
4回答
我已经在创建了一个示例
html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="step">1</div>
<div class="step">2</div>
<br/><br/>
<div class="ste
浏览 2提问于2011-04-23得票数 24
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
