CSS flexbox响应div
CSS flexbox是一种用于布局的弹性盒子模型，它可以帮助开发者轻松地创建响应式的网页布局。Flexbox提供了一种灵活的方式来组织和对齐网页中的元素，使它们能够自动适应不同屏幕尺寸和设备。
Flexbox的主要特点包括：
- 弹性容器（Flex Container）：使用display属性设置为flex或inline-flex的元素，成为弹性容器。它们可以包含一组弹性项目。
- 弹性项目（Flex Items）：弹性容器中的直接子元素成为弹性项目。这些项目可以根据需要进行伸缩、缩放和对齐。
- 主轴（Main Axis）和交叉轴（Cross Axis）：弹性容器具有主轴和交叉轴两个方向。主轴是弹性项目的排列方向，默认为水平方向。交叉轴则垂直于主轴。
- 弹性盒子属性（Flexbox Properties）：通过设置不同的属性，可以控制弹性容器和弹性项目的行为，包括对齐方式、伸缩比例、换行等。
CSS flexbox的优势和应用场景包括：
- 简化布局：使用flexbox可以更轻松地实现复杂的网页布局，减少了对传统布局方法（如浮动和定位）的依赖。
- 响应式设计：flexbox使得网页布局能够自适应不同屏幕尺寸和设备，使得网页在不同分辨率下都能良好地呈现。
- 简单易用：相比于传统布局方法，flexbox的语法更加简洁明了，易于理解和使用。
- 适用于各种场景：flexbox适用于各种网页布局需求，包括导航菜单、网格布局、卡片式布局等。
腾讯云提供了一系列与CSS flexbox相关的产品和服务，包括：
- 腾讯云Web+：提供了一站式的Web应用托管服务，支持灵活的网页布局和响应式设计。
- 腾讯云CDN：提供全球加速服务，可以加速网页的加载速度，提升用户体验。
- 腾讯云云服务器（CVM）：提供弹性的云服务器实例，可以根据实际需求进行伸缩和调整。
- 腾讯云对象存储（COS）：提供安全可靠的云存储服务，适用于存储网页中的静态资源文件。
更多关于腾讯云产品和服务的详细介绍，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
1回答
我是html和CSS的初学者，我会尝试用可点击的点来制作地图，但我不明白。我收到了使用柔性盒和创建一个以地图作为背景图像的容器的提示，并创建了单独的容器，这些容器可以为可点击的点保存图像按钮。该解决方案必须响应并同时适用于桌面和移动设备。
首先，我尝试让背景图像和点/(框)同样调整大小，然后尝试在points/( by )上设置位置，但我已经遇到了背景图像和父容器的问题。因为我不能将父容器的高度设置为与背景图像相同的高度，所以现在只显示了一半的图像。如果我插入父容器的高度等于px中的背景图像，背景图像将不会调整大小响应。
是否有人知道如何将背景图像和容器的高度设置为相同，或者可能知道更好的解决
浏览 4提问于2021-12-19得票数 1
回答已采纳
1回答
我有以下简单的示例，其中包含了确切的css。
唯一的区别是第一个是img标记，第二个是div。
我不明白为什么在相同的css下，div会在最小化窗口时做出响应，而图像则不会。
img {
width: 100%;
height: 200px;
border: solid blue;
}
.block {
width: 100%;
height: 200px;
border: solid blue;
}
浏览 3提问于2020-03-26得票数 0
1回答
使进度条响应
、、
我有这些progress bars，它们应该作为评级工作，它们看起来很好：
我已经应用了一些CSS，并且我通过读取文本文件中的值来使用JavaScript更改它们的宽度。但根本不响应，并且每当窗口调整大小时：
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="second-part">
<div class="row">
浏览 2提问于2018-05-29得票数 1
1回答
我曾经从事响应式设计。现在我有一种感觉，但不是很确定，可以通过id或class来管理每个div的位置。例如：
<div id='first'></div>
<div id='second'></div>
<div id='third'></div>
在CSS中，你可能会说：
@media (max-width: 600px) {
// pseudo code
#second: after #third
}
@media (max-width: 300px
浏览 0提问于2014-11-13得票数 0
2回答
如何使div在中间响应中的宽度
、、、、
嗨，我想知道如何在CSS中实现一种使另两个div中间的div宽度自动可调的方法。
.container {
width: 100%;
}
.left,
.right,
.middle {
float: left; // or display:inline i don't know... you tell me
}
.left {
width: 50px;
}
.right {
width: 60px;
}
.middle {
width: "...fill the container...";
}
<div class="conta
浏览 2提问于2016-05-23得票数 2
回答已采纳
1回答
假设我有两个div： <div id="wrapper">
<div id="text">Text!</div>
</div> id为"wrapper“的div需要将其内容的宽度加上7px作为其最小宽度。最大宽度是其内容的宽度加上15px。当不能设置最大宽度时，id为"wrapper“的div的宽度应该是响应的，但可以设置一个介于允许的最小值和最大值之间的值。我该如何使用CSS来实现呢？(它可以调整填充或宽度)。 我尝试过使用flex css属性，如下所示： flex: 0 1 10%;
浏览 11提问于2020-10-26得票数 3
回答已采纳
1回答
我有一个导航栏与左边角的标志和一些页面的标志和页面链接都在不同的div。我想让名为navbar的div在调整窗口大小时响应，我只想改变窗口的宽度。 我的代码： <div class="top">
<div class="logo">
<a href="localhost:8080"><img class = "logo" src="@\assets\logo.svg" alt="site logo"></a>
浏览 14提问于2021-10-01得票数 0
1回答
特色区块内容的多图像组合
、、、、
我正在尝试为下面的XD布局创建可靠的标记和样式
我为整个项目添加了bootstrap，但我不知道如何为这个布局编写标记和样式，并记住响应性！
.hb-block-content-part {
position: relative;
width: 100%;
height: 100vh;
background-image: url("../images/bg-two.png");
background-size: cover;
background-position: center center;
}
.hb-block-content-p
浏览 1提问于2020-02-14得票数 0
假设我有以下设置：
<div class="A parent">
<div class="A a1"></div>
<div class="A a2"></div>
<div class="A a3"></div>
</div>
CSS：
.A {
width: 100%;
}
.parent {
height: 300px;
width: 300px
}
.a1 {
heig
浏览 1提问于2013-08-30得票数 1
回答已采纳
1回答
响应式网页设计栏目出现在下面
、、、、
所以我一直在尝试制作一个响应式的网页，结果应该是这样的。 ? 当我试图在配置文件后添加第二列时，由于某种原因，它出现在它的下方，而不是像这样。 ? 不管我学到了什么，下面都会出现这个框。我只能猜测，这里的边框会影响列，即使我调整了浏览器的大小，使其无法适应，但实际上它看起来并不像这样。 这是我在CSS文件中所做的： /* rows and column */
.row::after{
content: ””;
clear: both;
display: table;
}
[class*=”column-”]{
float: left;
padding: 2px;
widt
浏览 61提问于2021-11-09得票数 1
回答已采纳
1回答
如果能帮上忙我会很感激的。我对HTML的理解非常有限，正在尝试使用HTML/css来自定义此网页模板。我的主要问题是，当我按照文档支持中提供的说明将flexslider添加到模板中时，我添加到模板中的图像没有响应。以下是将图像添加到滑块的说明： <div class="slides">
<div class="flex-slide">
[...]
</div>
<div class="flex-slide">
浏览 13提问于2020-12-21得票数 0
我想用导航栏来写英雄头衔。然而，我遇到了一些响应性的问题。现在我正在做前端指导或挑战，他们建议桌面的最大宽度应该是1440px。这就是我不确定如何正确操作的地方。我需要英雄的标题和标志是在一行。我想将自动保证金应用到导航栏，但这似乎根本不起作用。你知道怎么解决这个问题吗？我的想法是将容器和导航栏的宽度都设置为1440px= 90em，但不确定这是否是正确的方式。 header {
position: absolute;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-w
浏览 25提问于2021-02-08得票数 0
1回答
我有一个这样的布局：
<div class="flexbox">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
以及它的css：
html,
body {
height: 100%;
}
.flexbox {
display: flex;
flex-direction: column;
浏览 0提问于2016-05-22得票数 8
回答已采纳
1回答
我创建了一个简单的旋转木马与外部的DIV，它的宽度和高度设置为600X800，位置设置为“位置:相对”，这个DIV内部的图像是“位置:绝对”，顶部和左侧为零。我还保留了一个“左/右”按钮，这样每当我单击左/右按钮时，图像就会使用JQuery相应地向左/向右移动。这一切都很好，包括响应性。但我有一个问题，当我有不同大小的图像时，我想要在水平和垂直中心显示它(“垂直对齐:中间”)。我在CSS中尝试了不同的方法，但似乎没有成功。我知道我可以做到这一点使用JavaScript，但不知道是否有人可以帮助我只使用CSS，非常感谢…如果可能的话，我想避免使用JavaScript。请注意，此旋转木马一次显示
浏览 13提问于2020-10-14得票数 0
1回答
我正在尝试创建一个导航栏，其内容位于导航栏的左、中和右。所有这些同时确保导航条仍然响应。当页面最小化时，下拉菜单就会弹出。此外，我被禁止使用鞋带(作业)。那么，我如何在不依赖其他CSS的情况下做到这一点呢？基本上我是如何创建它的？
我试着阅读引导码，但我不明白。相对新手在编码方面
从W3schools检索
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += "
浏览 2提问于2019-07-17得票数 0
3回答
我正在尝试在我的代码中实现以下设计。我想让整个页面响应式的，并在必要时设置断点。所以，我想，使用CSS flexbox实现这个功能会很好。我是一个使用flexbox的新手，所以任何帮助都将不胜感激。因此，在我的"section-two__main“div中，我有项的编号和名称。我想要像表格一样显示这些项目(如下图所示)。我可以使用css的顺序属性，但当缩小页面时，我又失去了直接的响应性。如果可能的话，有人能指导我完成这件事吗？如何实现设计并保持响应性？至少在放置断点之前，有没有可能调整设计，以便在页面缩小时，项目保持与实际设计一样？如果可能的话，我想使用css flex box。提前
浏览 46提问于2020-10-09得票数 0
1回答
我正在使用flex-box来创建一个响应表，其中包含以下3列: 80%、15%和5%。此外，每当屏幕大小改变时，我希望宽度%保持不变，即始终保持在80%、15%、5%的比例。
我在这3列中使用了以下CSS：
styles.css
.container{
display: flex;
}
.firstColumn {
padding: 12px;
width: 80%;
flex: 8;
}
.secondColumn {
padding: 12px;
width: 15%;
flex: 1.5;
}
.thirdColumn {
padding: 12px;
浏览 1提问于2022-04-04得票数 0
我和5位导演一起工作：
主分区(作为包装器，宽度和高度设置为auto)
子div (包含红色和蓝色、width:75%和height:auto两个div)
红div (height:90% width:auto) )
绿色div (height:10% width:auto)
蓝div (width:25% height:auto)
如下所示：
在当前宽度和高度设置中，div是按比例相互响应的。
但问题是，如果设置红色div的height:89% bottom-margin:1%，那么它们就不会产生相同的输出，包含红色和绿色的子div，
浏览 2提问于2017-03-05得票数 1
回答已采纳
1回答
对于我的学校项目，我必须使一个旧的CRM响应式。所有的表现在都是完全响应的，但有一个小问题。这就是它目前的样子：
我尝试了几种方法，但都失败了。所以我不知道我现在还能做什么。下面是我用来获得表响应的css
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(mi
浏览 0提问于2015-12-15得票数 0
3回答
IE9的Flexbox替代方案
、、、、
我最初用Chrome开发了一个网站(最容易设计)，但现在我开始使用IE支持模式。
话虽如此，我还是从IE11开始，对IE和Chrome之间奇怪的区别做了必要的修改。但现在我正在逐步降低IE版本。我能够得到90%的网页，以正确显示与IE10的CSS。但是现在，我在这两个浏览器上使用的大多数CSS元素，大部分都与IE9无关。
如果可能的话，我希望避免需要多个特定于浏览器的样式表。
第一个问题是转换CSS的flexbox模型的IE10+实现。
flexbox容器的当前实现：
div#navContainer{
display: flex; //Current browsers (IE11,
浏览 3提问于2014-06-24得票数 39
我有一个布局工作在CSS，但我不明白它为什么工作。CSS专家，请了解一下这里发生了什么。
我的目标是有这样的布局：
突出的特点是：
窗口顶部和底部的固定高度页眉和页脚
占据页眉和页脚之间全部空间的内容区域。
内容区域有自己的滚动条(也就是说，它不会将页脚向下推到屏幕底部)。
我使用css和content中的div ( 0%高度)的组合实现了这一点。与我的预期相反，0%的高度差延伸到完全可用的高度。
下面是一个JSFiddle： (它看起来不太正确，因为外部height:100%在jsfiddle容器中没有意义)。
HTML
<div id="ever
浏览 2提问于2013-04-04得票数 0
这是
我想用css改变手机屏幕中第二和第三元素的顺序。做这件事的最佳方式是什么？
HTML
<div id="parent">
<div id="a">image</div>
<div id="b">button</div>
<div id="c">description</div>
</div>
Css
@media screen and (max-width:300px){
#parent{
display:flex
浏览 1提问于2015-01-13得票数 0
2回答
使悬停时出现挠曲箱
、、、、
我需要一些帮助的css问题。我实际上是在做一个带有双动画效果的动画勾选按钮。你可以看到我的目标是什么：
我正在努力从右边看按钮的外观。我决定使用与悬停特性相关联的flexbox，这样我就可以在悬停时显示按钮，但它似乎不起作用，我也不知道为什么。
下面是代码：
.flexbox-container {
display: flex;
overflow: hidden;
justify-content: space-between;
}
.flexbox-3 {
display: none;
}
.flexbox-container: hover+flexbox-3 {
浏览 3提问于2022-06-15得票数 0
回答已采纳
2回答
我试着制作带有背景的侧边栏，它的高度与#页面内容的高度相同，但我无法使它工作。边栏高度仍与其内容相同。
下面是css代码：
.flexbox {
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
overflow: hidden !important;
}
.flexbox .flexbox-col {
flex: 1;
}
<div id="mainWrapper" class="ma
浏览 1提问于2015-03-22得票数 2
3回答
我确信我忽略了一些简单的东西，但我正试图在页面上居中显示内容div。背景图像是16x9，我希望它保持不动，而中心内容div在标题div下面上下滑动。
这是我的html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css">
浏览 0提问于2013-06-22得票数 0
我正在做一个react项目，因为我有一个父组件，它是该App.js的App.js，Iconcircle.js是一个子组件。
现在，对于Iconcircle.js，Reusableicons.js是一个子组件。在Reusableicons.j的组件中，我创建了一个图标，并计划通过在Iconcircle组件中使用道具来重用它。
一切正常，但在移动屏幕上，我无法将图标组件移动到中心。
帮我克服这个问题
这是App.js
import React from 'react';
import './App.css';
import Iconcircle from '
浏览 2提问于2019-12-07得票数 0
我有以下使用Flexboxes的HTML/CSS代码：
*{
font-family:Arial;
}
html,
body {
height: 100%;
margin: 0
}
.flexbox {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 100%;
width: 100%
}
.flexbox .header{
background: green;
border:solid;
font-size: 30;
font-weight: bold;
浏览 7提问于2017-10-15得票数 0
回答已采纳
让我公开我的问题，所以我能够找到如何创建一个响应性的网页与媒体查询，我有一个模板的计算机类型的屏幕，这几乎是完美的工作。问题是，我想创建一个移动版本，我能够理解概念并创建基础，但我有一个主要问题。
我有一个名为statistiquesRight的div，它在我的计算机版本中显示得很好，但是在我的移动版本中，当我试图向下推元素时，margin-top 20%会将顶部的每个元素都按下(我想是为了适应屏幕端口视图)。但我想把它们修好..。我尝试将justify-content: end添加到gridFirstTP中，这是我创建网格的div。但这没有用，有人向我解释这个概念或问题吗？
。。不要注意某些
浏览 3提问于2021-05-10得票数 0
回答已采纳
1回答
我需要一个响应式的下拉菜单，我已经看过教程等。但是所有的东西都涉及到javascript，我还不能使用它。菜单最好是用汉堡包。我一直在尝试并设法在没有汉堡包的情况下做到这一点，但是它看起来很可怕，内容也超过了它。 我附加我的代码没有响应菜单。任何帮助将非常感谢只使用CSS请。 <!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="viewport" co
浏览 9提问于2019-04-11得票数 0
回答已采纳
我有一个div，它应该相应地对齐另一个div的"float:left“规则。
这个div A的内容被正确地对齐了，但是边框和背景没有，它们不尊重其他div的"float:left“规则，而只是在它下面。
见图像
我注意到，如果我在div A的样式中添加了一个"display:table“，这个问题就已经解决了，但是我还有另一个问题，这似乎是由"display:table”规则引起的:我的div的边框和背景不再扩展到右边页面的末尾，它们只是围绕div的内容。
见图像
考虑到这是一个响应的网站，我不能使用固定的宽度参数作为元素，有任何css技巧来解决这个问题吗？
谢
浏览 4提问于2014-03-04得票数 0
我不能将这些项目居中。我不明白我做错了什么。我尝试了所有的方法，但可能我正在做的事情是不正确的，但我找不到是什么！------------------------------------------------------------------------
.flexbox-container {
display: flex;
justify-content: center;
flex-direction: row;
}
.fl
浏览 0提问于2021-04-20得票数 0
我希望通过路由器插座添加的所有组件使用flexboxes占据页面的所有可用高度和宽度。感谢"how to make nested work“这篇文章中的，我知道使用以下基本的HTML和CSS可以达到预期的效果：
HTML：
<div id="flexbox-outer">
<div id="flexbox-middle">
<div id="flexbox-inner">
</div>
</div>
</div>
CSS：
html,
浏览 15提问于2019-11-05得票数 1
回答已采纳
1回答
响应导航栏响应问题
、、、
好的，所以，我试图使我的导航栏响应，但我遇到了一些麻烦 我的html和css @media (max-width: 600px) {
.toggle-btn {
display: flex;
}
.logo {
display: none;
}
header {
display: flex;
flex-direction: column;
align-items: flex-sta
浏览 14提问于2020-09-18得票数 0
回答已采纳
2回答
如何使容器内的项具有响应性？容器最多可以有3个项目，并且项目的数量是未知的。通过响应性，我的意思是当调整大小时，项目宽度会随着容器div的变化而改变，我认为项目宽度可能是一个百分比值。此外，项目宽度有一个最大宽度。它可以通过简单的css来实现吗？ <div class="container">
<div *ngFor="let item of items, let i=index" class="item">
{{item}}
</div>
</div>
.con
浏览 20提问于2019-04-26得票数 0
回答已采纳
4回答
我对html/css/javascript的反应还是新手。我只是想让我的RandomNumberButton坐在与我的h2标记文本相同的行上。我相信答案是将两个项都放在div标记中，并将css显示属性设置为内联。我试着用带有这种风格的div标签包装它，但没有运气。让我知道我能做什么。
以下是我的App.jsx的呈现函数
render: function () {
return (
<div>
<h2> Hello, {this.state.name}! </h2>
<MyForm />
<div style={{
浏览 5提问于2015-11-16得票数 0
2回答
在下面的图片中，按钮是取柔性盒的高度吗？为什么？我希望它是一个普通的按钮底部对齐左边的图像(白色方块)。
index.css
.grid-container{
display:grid;
grid-template-rows:[nav-row-start]auto [nav-row-end logo-nav-row-start] auto [logo-nav-row-end content-row-start] auto [content-row-end];
}
.nav-style{
height:5vh; /*make nav div take 5%
浏览 1提问于2020-01-04得票数 0
回答已采纳
2回答
我使用的卡片元素，从谷歌材料设计Lite主题。
我的卡片挨着坐在一起&和页面的左边对齐。我希望卡片对齐到页面的中心，同时保持堆叠功能，以响应视图。
简而言之，我有两个数字：
<div class="page__cards-div">
<div class="page__card">div content...</div>
</div>
相应的CSS如下：
.page__cards-div {
display: -webkit-flex;
display: flex;
flex
浏览 2提问于2017-12-19得票数 0
回答已采纳
1回答
试着让所有的挠曲盒在我的挠曲容器中的比例相等。
如果您试图缩小视口，中心挠曲盒将开始调整大小，但外部的不会。所以你最终会遇到这样一种情况，在中间有一张小图像，两边都是大量的图像。
我刚刚开始学习CSS，所以我不太清楚我在做什么，所以我很感谢你的帮助。
以下是一些额外的图片，它们有助于说明这个问题：
在缩小视口之前：
之后：
因此，理想情况下，我希望外部的图像与中间的图像一起缩小。
.flexbox-container {
display: flex;
justify-content: center;
background-color: #808080;
}
浏览 4提问于2022-06-29得票数 1
回答已采纳
我现在进入Flexbox，试图看看如何从使用传统的CSS网格过渡。
我有两个布局:一个是用CSS网格制作的。另一个是用Flexbox制作的。两个示例的基本布局都是非常基本的:页眉、导航、内容部分和页脚。
从设计上看，它们看起来都是一样的，对于RWD来说，它们的行为也完全一样。但是，为了使用Flexbox完成相同的行为，我必须在Nav和Content部分周围创建一个包装器div。
这是与CSS网格布局一起使用的HTML：
<div class="container-12 clear">
<header class="grid-12">
浏览 1提问于2015-02-22得票数 2
回答已采纳
1回答
我正在尝试完成一个包含3个组件的工具栏布局。左边和中间的大小很灵活，以至于我认为标准的响应式断点不能完成这项工作。在空间允许的情况下，弹性中心应相对于视口居中。但是，如果中心和左侧重叠，则允许中心部分偏离中心，以避免必须隐藏内容。
宽视口中的工具栏：
带有窄视口的工具栏。请注意，部分标题并不完全居中。这是可取的，因为它会与面包屑重叠：
我想也许flexbox可以做到这一点，但我正在努力让它工作。下面是我用flexbox做的一个尝试。
HTML：
<div class="toolbar">
<div>Site / Section A
浏览 0提问于2015-02-27得票数 1
1回答
我有以下标记：
<div class="content-one yellow" style="min-height: 365px;">
<div class="content-one-inner">
<div class="left">
<div class="img-wrapper">
<img src="" alt="Accenture tshirt
浏览 2提问于2017-01-24得票数 0
回答已采纳
1回答
CSS响应式标记部分
、、、
为了提高我的css技能，我创建了一个小网站，我的想法是在创建响应式网站时获得最佳实践。下面是简单的HTML标记： <section class="bg-image">
<img src="https://placehold.it/1606x1189" alt="imagem"/>
<div class="title">
<h2>I'm Title, <br />Sub Title</h
浏览 18提问于2019-09-15得票数 0
2回答
我正在尝试添加两个iframe(视频(16:9)和图像(1:1))并排的响应式布局。不知何故，我设法找到了一种能使布局响应的代码，我现在面临的唯一问题是，我不能使视频具有与第二个iframe相同的高度(图像一)，同时保持它的纵横比(16:9，因为它是youtube视频)。 我现在拥有的(演示和代码)：http://jsfiddle.net/dzw8jx4e/ HTML代码： <div class="t_container">
<div class="ts_iframe">
<iframe frameborder="
浏览 25提问于2020-08-17得票数 0
回答已采纳
好的，所以我学习html和css，所以我相对来说是新的。我跟踪了很多youtube视频来创建不同的布局。然而，在我所遵循的这个特定教程()中，我遇到了真正的麻烦。在本教程中，它展示了如何使用css转换效果制作一个非常酷的导航条，但是，当窗口被调整大小时，我悬停以展开div时，它会将所有其他div移动到页面下。无论窗口有多大，我都想让div在任何时候都留在容器里。我希望这真的很简单。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
&l
浏览 2提问于2014-09-30得票数 1
我的代码都是用default.html编写的，html是：
<div id="content">
<div class="group" id="left">
<div>Left_1</div>
<div>Left_2</div>
<div>Left_3</div>
<div>Left_4</div>
&
浏览 0提问于2012-08-29得票数 2
回答已采纳
3回答
我试图垂直对齐下面这两个“容器”(黑色和蓝色)，例如，A的距离应该与B相同。我已经尝试过使用top或below，但它没有响应。有没有其他方法可以做到这一点，并且仍然以facebook图标为中心(出于某种原因，它并不以Safari为中心，但在Chrome上工作得很好)？
代码
您还可以在 ()中看到它。
.content {
background: yellow;
padding-top: 40px;
padding-bottom: 40px;
}
.black-container {
background: black;
display: flex;
}
浏览 6提问于2017-08-17得票数 2
回答已采纳
网格本身一开始就有一个设定的大小，但当单击一个按钮时，用户会被问到他们希望网格/Sketchpad有多大。当他们输入金额时，就会创建一个新的网格。我正在完成的项目说容器div的高度/宽度不应该改变，但是.square div应该根据输入改变(例如，如果用户想要一个5 x 5的网格，.square div会根据输入改变大小)。我已经这样做了，但我遇到了两个大问题：
1)容器div中通常有剩余空间，因此其中一个.square div比其他div小得多，并且
2)我不知道如何确保横跨和向下的div的数量是相同的-6乘6，而不是例如，4乘9。
谢谢!
到目前为止，这是我的代码。提前道歉，如果它是混乱的
浏览 1提问于2015-08-13得票数 2
我如何用position: absolute/relative定位一个有3个字体很棒的图标的div，一个在左边，一个在中间，一个在右边(所以设计是响应式的)？
如果我在包装图标的div上执行position: absolute，它们会一个接一个地堆叠在一起。
我就是这么做的。但我意识到由于margin-top: 6vw的存在，在我调整浏览器大小时，由于position: absolute和百分比的原因，它的响应速度将不如其他浏览器那样快。那么我该怎么做呢？
#canvas {
position: absolute;
bottom: 62%;
left: 35%;
浏览 1提问于2018-01-14得票数 0
回答已采纳
1回答
TL:博士；在底部。
我已经寻找了大约6个小时的答案，尝试不同的解决方案，使嵌套的元素比以往任何时候都更深，只是试图找出这个。
我有一个div是响应，改变宽度和高度分别。在它中，我有4个div，我想要平均显示。在这样做的过程中，我让每个height:25%; display:table;，并在其中使用display:table-cell; vertical-align:middle;的<p>元素。它工作得很完美，但我想将text-overflow:ellipsis; white-space:nowrap; overflow:hidden;添加到其中。似乎我只是不能两全其美。要垂直对
浏览 3提问于2016-04-15得票数 5
回答已采纳
1回答
一开始，对不起，请原谅。我英语很差，因为它不是我的第一语言。也许这就是我找不到解决办法的原因。
我正在用5张卡片制作一个响应性的卡片组。对于一个大屏幕，我想把4张卡片放进一排，多余的卡片将集中在下一行。对于中屏幕，3张卡片将排在一排，2张额外的卡片将在下一行居中。
我能做这些。
但我想这么做
我的尝试：
.skills-content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;}
.card {
width: calc(25% - 20px);
bac
浏览 1提问于2021-10-31得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
