开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

显示2个div彼此相邻,并且一起大于屏幕

问题：如何使两个 div 元素彼此相邻且一起占据全部屏幕宽度？

答案：

要使两个 div 元素彼此相邻且一起占据全部屏幕宽度，可以通过设置 display: flex; 和 flex-direction: row; 来实现。这里是一个包含两个 div 元素的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Example</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
        }

        .container div {
            width: 50%;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>Div 1</div>
        <div>Div 2</div>
    </div>
</body>
</html>

在这个示例中，.container 使用了 display: flex; 和 flex-direction: row;，使得它的子元素（即两个 div）可以水平排列并占据全部屏幕宽度。每个 div 的 width 属性设置为 50%，以便它们占据相等的部分屏幕宽度。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

能用CSS实现的就不用麻烦JavaScript

hover div{ width:100px; border:1px solid red; position:relative...鼠标悬浮时显示鼠标悬浮的场景十分常见，例如导航的菜单： [image.png] 一般要把隐藏的东西如菜单作为hover目标的子元素或者相邻元素，才方便用css控制，例如上面的菜单，是把menu... menu在正常态下是隐藏的： .menu{ display: none; } 而当导航hover时显示： ```js /*使用相邻选择器和hover...同时menu自已本身hover的时候也要显示，否则鼠标一离开导航的时候，菜单就消失了： .menu:hover{ display: list-item; } 这里会有一个小问题，即menu和导航需要挨着一起...但是实际情况下会有意外发生，那就是在移动端iphone上面，触摸会触发CSS的hover，并且这个的触发会很高概率地先于touchstart事件，在这个事件里面会判断当前是显示还是隐藏的状态，由于css

1.4K1 1

Bootstrap学习文档（一）

auto（自适应）注意：这两个class不能放在一起，可以是兄弟关系，但不能是嵌套的关系。...1200px 表现形式：屏幕的宽度大于1200，一行显示n(结构里有几个div)列屏幕的宽度小于1200，一行显示1列 md 992px <= 宽度 <= 1200px 表现形式：...屏幕的宽度大于992并且小于1200，一行显示n(结构里有几个div)列屏幕的宽度小于992，一行显示1列 sm 768px <= 宽度 <= 992px 表现形式：屏幕的宽度大于768...并且小于992，一行显示n(结构里有几个div)列屏幕的宽度小于768，一行显示1列 xs 宽度 <= 768px 表现形式：屏幕的宽度小于768，一行永远显示n(结构里有几个div...列偏移 col--offset- 向右偏移，第一个 * 是和屏幕尺寸有关，第二个 * 是偏移的列数，如果偏移的数量大于12则会不起作用。

2.8K2 0

bootstrap快速入门笔记（二）-栅格系统，响应式类

.row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding 3.栅格类适用于与屏幕宽度大于或等于分界点大小的设备...*/ /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面显示器，大于等于 992px） */...@media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: @screen-lg-min...超小屏幕手机 (<768px)小屏幕平板 (≥768px)中等屏幕桌面显示器 (≥992px)大屏幕大桌面显示器 (≥1200px) 栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列...四，响应式工具类通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

1.1K3 0

CSS技术入门

B元素，不会选中孙级的后代B元素逗号，同级(兄弟)的样式加号 +这个+也是同级，但与,有点区别，它是相邻兄弟选择器，即元素之间必须相邻，比如A+B，B必须紧随着A，在A前面也不行，并且只会改变B的样式属性选择器...以下实例选择了元素中所有直接子元素：div>p{background-color:yellow;}相邻兄弟选择器相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素...以下实例选取了所有位于元素后的第一个元素:div+p{background-color:yellow;}普通相邻兄弟选择器普通兄弟选择器选取所有指定元素的相邻兄弟元素。...图片如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。...该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。 @media 规则允许在相同样式表为不同媒体设置不同的样式。

2.8K6 1

总是听别人说响应式布局，原来这么简单

响应式布局没有绝对的话好与坏，需要根据网站的性质来确定，比如 toutiao的页面元素非常多，页面需要包括所有屏幕尺寸的样式显示不是很好操作，然而 segmentfault页面元素较少，反而放在一起方便维护... 我们简单解释一下上述代码片段 min-width指的是当屏幕尺寸大于当前值的时候样式生效。外层的 div包裹内层的两个 div。...col-md-6col-sm-12当屏幕尺寸大于 768px的时候子 div宽度是父 div的一半，所以是并排。当屏幕尺寸大于 480px的时候子 div宽度和父 div的宽度一样。...那么问题来了，图一尺寸大于 768px不假，但是也大于 480px啊，那么怎么就按照 768px的尺寸排布了呢？...和其他表达式一起用需要 and @mediaonly screenand(min-width:400px) screen screen是一种媒体类型，例中的 screen意思是仅支持彩色电脑显示器。

7725 0

3分钟理解响应式布局

响应式布局没有绝对的话好与坏，需要根据网站的性质来确定，比如 toutiao的页面元素非常多，页面需要包括所有屏幕尺寸的样式显示不是很好操作，然而 segmentfault页面元素较少，反而放在一起方便维护... 我们简单解释一下上述代码片段 min-width指的是当屏幕尺寸大于当前值的时候样式生效。外层的 div包裹内层的两个 div。...col-md-6col-sm-12当屏幕尺寸大于 768px的时候子 div宽度是父 div的一半，所以是并排。当屏幕尺寸大于 480px的时候子 div宽度和父 div的宽度一样。...那么问题来了，图一尺寸大于 768px不假，但是也大于 480px啊，那么怎么就按照 768px的尺寸排布了呢？...和其他表达式一起用需要 and @mediaonly screenand(min-width:400px) screen screen是一种媒体类型，例中的 screen意思是仅支持彩色电脑显示器。

9192 0

技巧 | view-port 那些事儿

当你远离框架时（缩小），你可以看到大图更多的部分；或者你也可以靠近一些（放大）只看局部；并且你也可以移动框架的位置以看到大图的其他部分。...* div块居中 */ } Hello World ...0小于10的浮点数 minimum-scale（允许用户缩放到的最小比例）：大于0小于10的浮点数 maximum-scale（允许用户缩放到的最大比例）：大于0小于10的浮点数 user-scalable...并且手机浏览器在展示网页时，若手机屏幕的尺寸小于 viewport（默认为 980px），则用户看到的页面是 viewport 按照手机屏幕的尺寸等比例缩放而来的（即自动适应 initial-scale...为小于 1.0 的浮点数）；若手机屏幕的尺寸大于 viewport，则浏览器会自动扩展（expand），而不是缩放（zoom）。

6962 0

CSS3学习(一)——基础学习

第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。继承的样式没有权值。...1， 0 ， 0， 0 0, 99 ， 99 ， 99 ---- 1.3 单位 1.3.1 字体单位：像素、百分比、em、rem、长度单位: 像素：屏幕(显示器)实际上是由一个一个的小点点构成的...，不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰，所以同样的200px在不同的设备下显示效果不一样。...bottom padding- left 内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上，盒子的可见框的大小，由内容区内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算...兄弟元素：兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值) 特殊情况: 如果相邻的外边距一正一负，则取两者的和。如果相邻的外边距都是负值，则取两者中绝对值较大的。

7392 0

正式开始学习ASP.NET Core 6 Razor Pages 介绍

在随后的屏幕上，选择“ ASP.NET Core Web应用程序”模板，然后单击“ 下一步”。在下一个屏幕上，为项目提供一个名称。... ``` Index.cshtml是显示模板，扩展名为.cshtml。它很像MVC中的Razor视图文件。...同样，如果您有一个ContactUs.chtml 视图文件，并且导航到http://localhost:2221/ContactUs，您将在浏览器中看到ContactUs页面。...由于PageModel类和显示模板位于一个位置并且彼此密切相关，因此使用 Razor Pages 构建单个页面非常简单，同时仍使用ASP.NET Core MVC的所有体系结构功能，例如依赖项注入，中间件组件...在一些ASP.NET Core Web应用程序中，也可以将两种模式（即ASP.NET Core MVC和Razor Pages）组合在一起。

3.7K1 0

软件推荐(Sublime) -- 文本编辑最佳实践

我总结了下，Sublime大致有如下特征：颜值高，并且高可配置（早期版本可以略微不明显，从3143版本开始，妖艳的不行）更新版本勤快（可以看得出开发人员的努力）成熟的插件市场（插件多）收费软件，...你可以试着创建一个HTML文件，然后打div按Tab打p按Tab打a按Tab，效果如下： ?...愚认为多行编辑的基础在于选择和选中，选择大于努力，选中需要努力，只有你选的好选的对，那么后面的编辑自然也不成问题。那我们就来思考下选择，可以怎么选，相邻上下行选择上下键就好了，那么不相邻呢？...相邻的上下行之间可以根据按CTRL + L的次数来选中一行或者多行，是往下的。 ? 那我要是不相邻呢？这里的解决方案是按住CTRL然后鼠标左键选择，然后CTRL + L选中 ?...+ 数字键当前屏幕移动到指定屏幕 ?

1.3K2 0

Bootstrap行和列

-- 列内容 -->在上述示例中，我们使用元素创建了一个行，并添加了.row类。行可以包含一个或多个列，并且总宽度应该等于12列。如果超过12列，那么多余的列会自动换行到下一行。...通过指定列的宽度和偏移量，我们可以控制内容在不同屏幕尺寸下的布局。下面是一个示例： <!...在这种情况下，.col-6表示每个列占据行的一半宽度，因此左侧和右侧内容将并排显示。Bootstrap使用12列的网格系统。...在大型屏幕（大于等于lg断点）上，每个列占据4个网格列的宽度（.col-lg-4），即一行同时显示3个列。...在中等屏幕（大于等于md断点，小于lg断点）上，每个列占据6个网格列的宽度（.col-md-6），即一行同时显示2个列。在小于md断点的屏幕上，每个列会自动换行，占据100%的宽度。

2K3 0

知识整理之CSS篇

相邻的margin要一起参与计算 B 请注意，多个 margin 相邻折叠成一个 margin，所以计算的时候...，应该取所有相关的值一起计算，而不能分开分步来算。...才会相邻。...权重区别 link引入的样式权重大于@import引入的样式。 px、em与rem的区别？ px px，是相对长度单位，它是相对于显示器屏幕分辨率而言的。

1.6K2 0

Bootstrap响应式工具

以下是Bootstrap提供的响应式断点：xs（超小屏幕）：适用于移动设备，屏幕宽度小于576px。sm（小屏幕）：适用于平板设备，屏幕宽度大于等于576px。...md（中等屏幕）：适用于小型笔记本电脑和平板设备，屏幕宽度大于等于768px。lg（大屏幕）：适用于大型笔记本电脑和台式机，屏幕宽度大于等于992px。...xl（超大屏幕）：适用于大型台式机和显示器，屏幕宽度大于等于1200px。通过在类名中使用这些断点，开发者可以根据不同屏幕尺寸应用特定的样式或布局。...显示/隐藏类Bootstrap提供了一些用于控制元素在不同屏幕尺寸下显示或隐藏的类。这些类可以根据需要在不同的断点上添加或移除。... 这是另一个响应式列，将在小屏幕上占据一半宽度，在中等屏幕及以上占据四分之一宽度。

2.2K4 0

关于响应式布局，你需要了解的知识点

例如我们希望在屏幕尺寸低于 768px 的时候显示黑色，大于 768px 的时候显示红色，那么我们可以这么写。 <!...在导航栏宽度大于 1280px 的时候，会讲导航栏显示出来，如下图所示。为了较好地解释实现原理，我们用如下的 html 代码代表美团导航栏的实现。...其实实现这样的效果很简单，只需要实现这样的逻辑即可：默认情况下，显示 ipad 类对应的 div 块，隐藏 pc 类对应的 div 块。...当浏览器的宽度大于 1280px，那就隐藏 ipad 类对应的 div 块，显示 pc 类对应的 div 块。实现的 CSS 代码如下所示。...768px的设备应用某些样式，那么我们可以这么写： @media (max-width:768px) { /* … */ } 如果我们想针对所有屏幕宽度小于 768px 并且屏幕高度小于 500px

4401 0

从零开始学 Web 之移动Web（七）Bootstrap

你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。...如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。... 解释：上面四个div，如果在超小屏幕上就 100%显示（占12栅格）；在小屏幕上...，每个div占50%显示；在中等屏幕上，每个div占25%显示；在大屏幕上，每个div占33.33%显示。...- : 大屏幕大桌面显示器 (≥1200px) 注意： 1.栅格系统是往上兼容的：意味着小屏幕上的效果在大屏幕上也是可以正常显示的人，但是大屏幕上的设置在小屏幕上却无法正常显示。

5.6K3 0

由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

/div> 23 效果显示如下： ?...> 19 我会掉到下一行我会掉到下一行我会掉到下一行 20 21 效果显示如下： ?...名词解释：视口：通过解析文档，连续媒体（比如屏幕就是连续媒体，而打印机则是基于页的媒体）给用户产生一个视口（一个窗口或其它在屏幕上显示的区域）。...在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。即是在BFC中相邻的块级元素的垂直边距会折叠（collapse）。...名词解释：边距折叠：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

1.1K5 0

BootStrap初始

栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。...因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。... 五媒体查询当浏览器屏幕的宽度大于一定的范围显示红色当小于一定的宽度显示绿色 <html lang="zh-CN"...*/ /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面显示器，大于等于 992px） */...@media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: @screen-lg-min

4.6K1 0

深入学习下 CSS 间距相关的知识

https://ishadeed.com/article/spacing-in-css/ 如果两个或更多元素接近，则用户将假设它们以某种方式属于彼此。...边距折叠简而言之，当两个垂直元素有一个边距，并且其中一个的边距大于另一个时，就会发生边距折叠。在这种情况下，将使用较大的边距，而忽略另一个边距。...如果添加了填充，它不会影响元素并且填充将覆盖其他内联元素。这只是一个友好的提醒，应该为内联元素更改显示属性。...你有没有想过当margin与具有不同书写模式的元素一起使用时应该如何表现？考虑以下示例。...也许你可以使用相邻的兄弟组合器，如下所示： .button + .button { margin-left: 1rem; } 情况不妙，如果只有一个按钮的情况怎么办？

13.4K4 0

关于 CSS margin，一些让你模糊的点

当两个 margin 发生重叠时，它们将组合在一起，两个元素之间的空间取较大的一个。较小的 margin 在较大的里面。...相邻的兄弟姐妹对 margin 重叠的最初描述是演示相邻兄弟姐妹之间的 margin 是如何重叠的。...除了下面提到的情况之外，如果有两个元素在正常流中依次显示，那么第一个元素的底部 margin 将与下面元素的顶部 margin 一起重叠。在下面示例中，有三个div元素。...第二个元素与第三个元素之间的 margin 是 3em，因为3em大于第二个元素底部margin 20px。...如果出于语义目的而对元素进行包装，但这些元素不显示在屏幕上，那么你可能不希望它们在显示中引入大的 margin。当web主要是文本时，这很有意义。

1.3K2 0

bootsrap栅格系统

//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放声明手机页面 <meta name="viewport" content="width=device-width, initial-scale...(单行)布局就完成了 col-md-表示在中等<em>屏幕</em>下的分布,col-md-4表示中等<em>屏幕</em>(md)下占据单行的4列,单行不得超过12列否则<em>显示</em>在第二行....下面看一下完整的栅格参数超小<em>屏幕</em> 手机 (<768px)小<em>屏幕</em> 平板 (≥768px)中等<em>屏幕</em> 桌面<em>显示</em>器 (≥992px)大<em>屏幕</em> 大桌面<em>显示</em>器 (≥1200px)栅格系统行为总是水平排列开始是堆叠在<em>一起</em>的...，当<em>大于</em>这些阈值时将变为水平排列C.container 最大宽度None （自动）750px970px1170px类前缀.col-xs-.col-sm-.col-md-.col-lg-列（column）...column）宽自动~62px~81px~97px槽（gutter）宽30px （每列左右均有 15px）可嵌套是偏移（Offsets）是列排序是在基础的栅格自适应页面上可以完善一下,进行不同尺寸设备<em>显示</em>的适应

9504 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭