1回答
居中模式窗口
、、、
我想将此日期选择器居中，以使其在移动设备上更易于使用，但我无法使其正常工作。我目前正在尝试这种方法：
.picker {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
}
...but不走运。它在水平方向上居中，但并不正确，并且模式会随窗口大小而缩放。在垂直方向上，它根本没有居中。
我也试过用jQuery把它居中，但我也不能正常工作。
小提琴：
浏览 0提问于2015-04-28得票数 0
我在flex容器中有一个div。我需要以编程方式改变位置-改变top和left -和大小-改变width和height这个div。我该怎么做。Flex忽略对top和left的更改，但似乎接受对width和height的更改。
浏览 1提问于2017-03-30得票数 0
1回答
我有一个特定尺寸的视口。目前，我只显示了在html5画布上绘制的单个图像。但现在我需要显示多个画布，范围从1-6。要求是根据画布的数量调整画布的大小，使其适合父div。
例如:单个canvas应该占父div的100%，2个canvas占50%-50%。因此，对于6个画布，它将是2行，每行3个画布。
此外，用户可以切换某些画布的显示/隐藏，以便他们必须重新排列。
我该怎么做呢？我使用的是angularjs、javascript和html5 css3。
浏览 0提问于2016-05-25得票数 0
我试图将溢出隐藏在一个标签中，该标签是深度嵌套的flex容器的子容器。下面是两个简单的片段来说明这个问题：
单容器(works):
#parent-flexbox {
display: flex;
width: 200px;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="parent-flexbox">
<label>long text that should be hidden because it
浏览 0提问于2018-03-30得票数 0
我正在创建一个自助网站，仅用于练习目的。我在我的主要内容(不包括标题和页脚)的右侧放置一个“旁注”栏(包含历史上相关的引语)时遇到了麻烦。
“float”属性将aside列放在所有内容的右侧，但将它放在底部。我试过使用'flexbox‘，这似乎解决了'aside’元素的问题，但它将页脚垂直放置在内容的顶部(&覆盖部分内容)，而不是水平放置在底部，同时将页眉移动到内容的左侧(它应该位于静态导航栏的顶部)。这就是它的作用：
有人能帮我吗？我真的很感激。
body {
display: flex;
width: 800px;
height: auto
浏览 0提问于2018-09-16得票数 0
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-使用bootstraps awsome <div class="clearfix visible-xs-block"></div>
优点：
1)仅html和CSS
2)使用内置的媒体查询，即基于视口大小的内在响应
缺点：
1)可能会导致过多的标记，例如，根据您有多少媒体查询
<div class="col-3-lg col-4-sm col-6-xs">module 1</div>
<div class="col-3-lg col-4-s
浏览 1提问于2016-05-26得票数 0
1回答
我想在页面的中心放置4个方框，即它们应该垂直居中并水平放置，一个方框应该在最左边，一个在最右边，左边的应该水平放置在极端的中间。我知道以前有人问过这样的问题，但我不明白解决方案的确切逻辑。有没有人能对此给出一个恰当的解释？非常感谢。这是HTML代码-
.cards div{
height: 200px;
width: 200px;
float: left;
text-align: center;
margin-left: 100px;
}
.card_1{
background-color: green;
}
.card_2{
bac
浏览 0提问于2017-08-12得票数 0
2回答
css居中方框，不对齐居中
、、、、
import React from 'react';
import { render } from 'react-dom';
const styles = {
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
};
const item = {
width: '26%',
}
const container = {
marginLeft: 'auto',
margi
浏览 0提问于2017-11-06得票数 1
2回答
我的代码(full version)： <div class="modal-body">
<div class="container">
<div class="row">
<div class="col-8 p-0">
<form class="form-group">
<form>
<input type="text" class
浏览 6提问于2019-06-02得票数 1
2回答
所以我在桌面屏幕上有一个很好的布局:看上面的图像。
但是当在移动布局/放大时，它变成了：(看中间的图像)。
所以我想要实现的是图像被放大到中心，就像背景大小的封面行为一样。(看下面的图片)
有人能帮我解决这个版面问题吗？提前谢谢。
浏览 1提问于2017-10-09得票数 0
回答已采纳
1回答
我使用<table>显示一些表格数据，因为我已经实现了
我省略了JS部分，因为它在这里并不重要。我将把它连接起来，这样单击任何行都会为该行展开某种面板(一次只有一个面板可见)。
这张图片正好显示了我希望面板显示的样子。我需要面板是一个容器，占用包含表的元素的整个宽度(这个元素比表更宽)。此外，重要的是要保持最左边的表列具有其最宽值的宽度，就像当前的情况一样。
有人知道一个直接的技巧来实现这一点吗？
理想情况下，这只涉及css和html；也就是说，不需要使用JS度量某些元素和设置其他元素的css支持(当然，JS将用于添加类和dom节点，但我不需要在解决方案中包含这一点)。
备注：
浏览 0提问于2013-12-30得票数 2
2回答
CSS3 flexbox或flex布局允许轻松地将元素水平和垂直居中，即使元素的高度和宽度未知。
是否可以使用flex布局在页面中心绝对定位覆盖(高度和宽度未知)？
浏览 2提问于2013-05-26得票数 9
我有一些需要注意的Flexbox标记。
除了最后一件事外，一切都在按计划进行。我在列布局中有一些div，其中两个是由内容或高度设置控制的，一个是不受控制的。最后一个不是高度控制的(中的颜色是黄色)，应该具有这样的高度，以便在其父div (绿色)中填充剩余的垂直空间。
即使当窗口按照这种响应性设计进行缩放时，黄色的div也应该始终填充到绿色父div的底部。
<div class="flexbox">
<div class="col">
<h3>RED</h3>
<p>Pellentes
浏览 4提问于2016-07-27得票数 7
回答已采纳
一个白色的背景可以看到在底部的div，这是固定的吗？
.flexbox-item_one {
display: inline-block;
width: 200px;
margin: 10px;
background-color: white;
box-shadow: 5px 5px 5px;
overflow: hidden;
}
.flexbox-item-1 {
min-height: 300px;
min-width: 300px;
border: 3px solid red;
overflow: hidden;
}
#Aries_pic
浏览 4提问于2022-05-14得票数 1
因此，我尝试使用CSS在导航栏上设置链接的样式。当我使用设置的像素值设置链接之间的space属性时，它工作得很好。 padding: 0 3rem; 但是，当我将这一行替换为使用以下代码以实现可伸缩性时 padding-left: 15%; 它会在我的屏幕上造成一个小故障，当我点击它们时，它会在靠近的地方扩大。Initial经过各种交互后，填充的链接慢慢扩展到合适的大小。After some interaction然后当我按下一个链接时(这个链接还没有设置任何内容，所以它会返回到主页)，填充就会回到0。然而，代码在控制台内的设备上运行得很好，只是在我测试时不能在浏览器上运行。这是否与Reac
浏览 14提问于2020-03-19得票数 0
回答已采纳
我有一个flexbox，它有一个用align-items: stretch声明的直接子对象。
在这个flexbox的直接子容器中，我希望有一个div容器，它也使用其父容器的全高(通过设置height: 100%)。
但是，div容器不会伸展到父容器的100%高度，除非我还在flexbox的直接子容器上设置了height: 100%。
这是一种bug吗？我必须用align-items: stretch和height: 100%设置flexbox的直接子组件才能实现我想要的效果吗？在我看来这是多余的。
下面是一个示例：
html,
body {
margin: 0;
height: 1
浏览 0提问于2015-11-01得票数 8
回答已采纳
好的，所以我学习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
我有一个flexbox，它有两列，每列都有50%宽。 然后我想在右栏添加一个大的正方形图片，图片的高度应该由左栏的内容高度决定。(以后会在左栏插入更多内容) 但是height和max-height总是不能处理我在flexbox中的图像，这会导致右栏被拉伸。 CodeSandbox：https://codesandbox.io/s/modest-rgb-u7k3k 理想：Image link 1 Real：Image link 2
浏览 16提问于2020-07-03得票数 0
回答已采纳
1回答
不幸的是，我不得不使我的网站代码与Internet Explorer 10兼容，即使在阅读了他们官方网站上的文档后，我也遇到了一些问题
下面是我的css代码：
.uberflex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
display: -webkit-flex;
-webkit-flex-flow: column wrap;
-webkit-ju
浏览 2提问于2013-09-10得票数 13
回答已采纳
在Macbook上的Safari 8.0.8中。
我使用flexbox在类似网格的容器中分发元素。
我的.eventContainer是多个.event盒的父级，应该通过柔性盒跨行分发。它在Firefox和Chrome中运行得很好，但是Safari将事件显示在自己的行上，而不是彼此相邻！
<div class="eventContainer">
<div class="event">
<div class="thumb">
<img src="htt
浏览 0提问于2015-09-17得票数 2
回答已采纳
1回答
在文本前添加图像
、、
我想使用jQuery在文本之前添加一个图像。下面是DOM中的HTML。我不想像在其他页面中那样使用类名添加任何样式，它也会受到影响 是否可以使用不变的文本值(picture1示例文本)插入图像 例如：|image| picture1示例文本 <div class="a">
::before
"picture1 sample text"
::after
</div>
浏览 17提问于2021-10-27得票数 0
回答已采纳
1回答
我已经使用angular实现了一个模态窗口组件，并且在将组件渲染到屏幕中心时遇到了问题。它在不同的屏幕上呈现不同的位置。我在谷歌上尝试了很多解决方案，但到目前为止似乎没有一个有效。 如果你看到下面的逻辑，当我的组件加载时，如果指定的大小是3个组件，那么它将应用模式-对话模式-lg模式-对话框中心。当我检查元素时，我可以看到应用的样式 import { Component, Input, OnChanges, OnInit, SimpleChange, SimpleChanges, DoCheck } from '@angular/core';
declare var $: a
浏览 19提问于2019-02-23得票数 0
1回答
CSS
、
我的问题是，根据浏览器窗口的宽度，将flex框包装成多行的样式:除了JavaScript之外，还有其他方法来设计特定的行吗？
我们有下面的div
<body>
<div class="flexwrap">
<div class=flexbox"></div>
<div class=flexbox"></div>
<div class=flexbox"></div>
</div>
</body>
和下
浏览 0提问于2013-10-29得票数 5
回答已采纳
我试着把一个flexbox容器放在一起，这样它们就会并排在一起，就像这样： ? 这是我到目前为止所知道的： .container {
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: flex-start;
border: 3px dashed black;
width: 750px;
height: 750px;
}
.container1 {
display: flex;
align-items: flex-start;
flex
浏览 52提问于2019-04-28得票数 1
回答已采纳
1回答
我有两列(使用flexbox)和一个媒体查询断点。然而，我尝试了下面的css属性，以获得100%的列，并在移动时相互叠加。
目前仍然是一个列，并排在任何时候。
宽度: 100%；
挠曲生长: 1；
容器的代码
.flexbox-container {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
列的代码
.flexbox-column {
display: flex;
width: 100%;
padding: 50px;
background-color: yellow;
浏览 0提问于2018-05-25得票数 5
回答已采纳
3回答
我在flexbox上有这样的布局
但是，当第一行的某一列的内容增加时，我得不到我想要的内容。下一张图片解释了我得到了什么和我想要什么：
基本上，如果需要，我希望框3跨多行，而不更改box4的位置
请帮我解决这个问题。谢谢
浏览 0提问于2015-10-06得票数 4
1回答
我需要我的元素在一行中，居中的高度，并有右水平对齐在有界块。我试着使用flexbox来解决这个问题，所有的东西都只适用于一行项目，否则溢出的元素会占用所有可用的空间，并且它看起来不会正确对齐。
.flex {
width:80px;
display: flex;
align-items: center;
justify-content: flex-end;
}
span {
text-align:right;
}
<div class="flex">
<i>0</i>
<span>
g
浏览 8提问于2016-08-15得票数 0
4回答
嗨，这里，我不确定如何去解决一个特定的问题，所以它在这里。在不使用表格的情况下，我想显示一个带有多行文本的段落，然后在右侧显示一个图像。
到目前为止，我已经尝试过了：
<div id="container">
<p>
Some Text
Some Text
Some Text
Some Text
</p>
<p>
<img src="image.jpg"/>
</p>
</div>
我使用了一个单独的样式表，并且尝试过像内联显示这样的东西，但没有成功。
浏览 0提问于2011-11-04得票数 1
2回答
如何定位一个元素，使其始终位于容器的底部，而不使用“绝对”定位？我有一个包含两个元素的容器，其中一个是文本描述，所以它可以和文本一样大。我希望将第二个元素放置在页面底部，而不管之前的div中的文本是否为空，如果文本不是空的，我希望在它们之间填充10‘t。
浏览 2提问于2016-10-05得票数 3
回答已采纳
2回答
我有一个用Gatsby版本2制作的页面，我想在一个flexbox容器中用gatsby-image制作组件。当我删除display: flex;属性时，图像就会出现，当容器是flex容器时，图像就会消失。
当我在开发工具中查看Gatsby应用的CSS样式时，我尝试逐个取消选择属性。当我取消选择position: absolute;属性时，图像会出现，但它的大小或位置不正确。
我还尝试在容器上设置flex-direction: column;，这会使两个图像中的第二个图像出现。但是，我更希望这个值是row。
在图像上设置overflow: visible !important;未使图像显示。
im
浏览 40提问于2019-07-08得票数 12
回答已采纳
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
3回答
**我想将className Navbar_icon的div移到导航栏的右侧。Navbar_icon包含搜索、帮助、登录。我希望将className Navbar_icon的div移到导航栏的右侧。Navbar_icon包含搜索、帮助、登录。**当前导航栏图片：< ? REACT COMPONENT JSX CODE :
<div className="Navbar">
<h1 className="logo">eat24/7</h1>
浏览 41提问于2021-10-21得票数 0
1回答
响应背景图像的按钮
、、、、
现在我在Magento 2上工作，我遇到了一个问题，当我在google chrome中调整大小时，按钮的背景图像不会保持不变。 .botones1 {
position: absolute;
left: 400px;
font-size: 22px;
color: white;
text-decoration: none;
font-weight: bold;
background-color: #357b2b !important;
}
.botones1:hover {
background-color: #9FCD4
浏览 17提问于2020-05-01得票数 0
1回答
引导程序具有相同高度的列
、、、
我在使用Bootstrap的页面中有两列，但其中一列比另一列大。我想要做的是让两列的高度相同，这样我就可以在底部对齐较短的列的内容。
我读过几种方法，比如margins、flexbox和tables。
我试过flexbox，它适用于更大的屏幕尺寸，但当我使用移动尺寸时，列不会像以前那样堆叠在一起，我在上面添加了flexbox样式。页边距我还没有尝试过，因为它对我来说有点老生常谈。表格--我不知道，我只是不喜欢用表格来布局。
如果你想尝试一下，这里有一个。
HTML
<div class="container">
<div class="row
浏览 0提问于2016-09-30得票数 3
1回答
我在这里是一个编程新手，所以我真的很感谢在这里能得到的任何帮助。因此，我正在编写一个网站，我在我的网站顶部有一个导航栏。这就是代码。 <!-- Main Body -->
<body id= "home">
<!-- Header -->
<header class="first-page">
<div id="navbar" class="navbar-top">
<nav>
浏览 32提问于2021-04-20得票数 1
回答已采纳
1回答
因此，我一直试图在vuetify中创建一个具有特定布局的V-Card。卡的顶部将在大小上变化，因此我需要能够将卡的底部对齐到底部。 所以我试着在这里做下面的代码，它应该允许第一部分“增长”以填充高度，然后第二部分“收缩”并停留在底部… 然而，没有成功..我可能只是做错了什么，但我正在拔掉我的头发... 下面是我的代码： <v-card shaped color="white" height="100%" width="100%">
<v-container fluid>
<v-layout column>
浏览 22提问于2020-04-22得票数 0
回答已采纳
我正在学习html/css，似乎item-2类的align-self没有应用，但在讲师视频中它是有效的。我只想知道代码中出了什么问题？ 这里是完整的代码，也可以在https://jsfiddle.net/nk0sp2ev/上分享 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-sca
浏览 15提问于2020-05-03得票数 0
回答已采纳
我需要确保我的3页脚小部件的高度是相同的，即使站点用户决定在其中一个小部件中放置更多的内容，这样他们就可以调整高度。我理解使用display: flex是最好的解决方案。我似乎不能让它起作用。
我的html：
<div class="footer-widgets"><div class="wrap"><div class="footer-widgets-1 widget-area"><section id="testimonial_footer-3" class="widget w
浏览 1提问于2015-04-11得票数 0
1回答
我有一个元素".ntf-container“，我插入了一些子元素..ntf‘s
当我插入元素时，“容器”向底部增加，但是列表在底部，它需要向顶部增加，以显示通知。
比如facebook通知。
浏览 0提问于2019-05-02得票数 0
回答已采纳
我正在制作一个练习的网站，它有多个可扩展的部分，其中一些是并排的。我让手风琴正常工作，但所需的行为是当您单击按钮展开一个手风琴时，所有其他的保持关闭。目前，这在技术上是正确的，但在同一行中被单击的折叠面板旁边的任何部分都会将它们的div展开为与被单击折叠面板中的文本相同的大小。 这里有一个小提琴来展示我的意思：https://jsfiddle.net/jsfsmh/m5x08awc/1/，但你必须扩展结果窗口，以确保两个Div坐在一起，而不是在另一个的顶部。下面是手风琴的相关内联JavaScript： <script type="text/javascript">
浏览 17提问于2019-01-09得票数 2
回答已采纳
3回答
我试图将我的两个div都放在屏幕中间的flexbox容器中。我尝试了页边距顶部和类似的东西，但我希望他们只在页面的中间。
.flexbox-container
display: flex
justify-content: center
flex-direction: row
flex-wrap: wrap
min-height: 100%
align-self: center
.flexbox-item
width: 500px
margin: 100px 60px
background-color: white
.f
浏览 0提问于2020-05-12得票数 0
我一直在尝试使用数据均衡器来使一些盒子的高度相等，但到目前为止，它只应用了一个height: inherit类，而不是所需的像素高度。这是我试图均衡的代码：
<div class="row" data-equalizer>
@foreach($category_items as $row)
<div class="large-3 medium-4 small-12 columns" data-equalizer-watch>
<div class="small-12 columns">
浏览 1提问于2015-01-21得票数 1
1回答
这似乎是一件很容易弄清楚的事情，但我似乎找不到我想要的东西。
我想让div的宽度从右到左变化。默认情况下，这似乎是从左到右工作的。
TweenMax.from($("#hero-container"),0.5,{width:0});
我尝试更改div的原点，但似乎没有什么不同。
浏览 0提问于2017-10-30得票数 0
1回答
我创建了一个简单的旋转木马与外部的DIV，它的宽度和高度设置为600X800，位置设置为“位置:相对”，这个DIV内部的图像是“位置:绝对”，顶部和左侧为零。我还保留了一个“左/右”按钮，这样每当我单击左/右按钮时，图像就会使用JQuery相应地向左/向右移动。这一切都很好，包括响应性。但我有一个问题，当我有不同大小的图像时，我想要在水平和垂直中心显示它(“垂直对齐:中间”)。我在CSS中尝试了不同的方法，但似乎没有成功。我知道我可以做到这一点使用JavaScript，但不知道是否有人可以帮助我只使用CSS，非常感谢…如果可能的话，我想避免使用JavaScript。请注意，此旋转木马一次显示
浏览 13提问于2020-10-14得票数 0
2回答
有六个图像，它们应该显示在两行中(尽管实际上它们是12个，因为我使用了悬停效果)。问题是图像没有显示在两行上。如果我把它放在一个固定的高度上就好了。例如500px。但这就给Responsive带来了一个问题。
我已经尝试了上千个公式。显示:块、内联、自动等。但似乎没有什么能给出好的结果。
这里我留下了简化的代码，如果有人能告诉我什么是失败的。谢谢!
CSS
<style type="text/css">
html,body {height:100%;
}
.image-grid {
display: -moz-flex;
display: -we
浏览 1提问于2015-12-28得票数 2
1回答
我想用jquery Ui draggable/droppable对一些容器进行排序。
因为有一条水平直线的元素，所以我使用display: flex。在向我的列表中添加条目时，这非常有效。
但我的列表可能比视口更大。因此，我需要在拖动元素的同时滚动。
这是我的小提琴：
Html
<div class="mainwrap">
<div class="flexwrap">
<div class="item item--small"><p>Loremlorem<
浏览 3提问于2015-10-08得票数 1
2回答
我试图创建这样一个3 div布局：
这样我就可以在左边的div里放一个图像，然后在右上角的div里放一个段落，在右下角的div中放一个段落。
我在弄清楚怎么用柔性盒来做这件事有点麻烦。在我看来，我需要5个div之类的东西。
<div class='flexbox'>
<div class='container-one'></div>
<div class='container-two'>
<div>
<p>&l
浏览 0提问于2018-12-19得票数 0
回答已采纳
2回答
我正在尝试用嵌套的容器创建一个简单的柔性盒布局。
当我有一个容器并使用全宽度+高度时，它工作得很好。
问题是嵌套容器也使用display: flex，但是嵌套容器不使用所有剩余的空间(只有当它们有定义的宽度/高度时才能工作)。
<div class="flexbox-parent">
<div class="flexbox-item header">
Header
</div>
<div class="flexbox-item fill-area content flexbox-item-grow&
浏览 6提问于2016-05-09得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
