小编val*_*als的帖子

我正在使用flexbox在页面中间对齐我的内容块,现在我愿意将标题与外部内容块对齐

在图像中,您可以看到需要发生的事情

这是我目前的结果:

这就是它需要的样子

因此,当缩放浏览器时,如果有空间,内容将转到第一行,那么标题需要在此时增长.

这是一个带有flexbox的codepen

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

http://codepen.io/Dirkandries/pen/XmpGzw

如果不使用媒体查询并保持内容框大小相同,这是否可行？

*可以删除填充和边距

众所周知,使用max-height和max-width可以使图像自动适合div,如下所示:

.cover img {
    max-width: 100%;
    max-height: 100%;
}

有没有办法制作一个半透明的封面(通过设置opacity: 0.8为div),恰好适合图像的大小而不通过javascript获得宽度和高度？

以下是我在jsfiddle的尝试.我只能覆盖整个容器,但我想要的只是覆盖图像.图像的大小是可变的,因为它们将由用户上载. https://jsfiddle.net/muorou0c/1/

为了得到最近一个问题的答案,我试图解析一个元素的盒子阴影,它被设置为

div {
    box-shadow: 0 0 0 5px green, 0 0 0 10px #ff0000,  0 0 0 15px blue;    
}

我希望得到那个字符串,在它上面做一个分裂(","),然后获得盒子阴影数组.(有3个元素)

我的问题是我得到了字符串

"rgb (0, 255, 0) 0 0 0 5px, rgb (255, 0, 0) 0 0 0 10px, rgb (0, 0, 255) 0 0 0 15px"

当然,当我分手时,我变得一团糟.

是否有更简单的方法来获取单个盒阴影的值？

我有一个简单的div,我想先将它旋转-35度,然后让它围绕y轴旋转.

然而通过使用transform: rotate(-35deg) rotateY(180deg);,我真正得到这样的:

y轴与div一起旋转,使我的尝试失败.

所以问题是,有没有办法transform-origin在旋转元素后重置y轴的角度(可能使用额外的父元素和？),以获得我想要的结果？

我试图在变量中添加条件然后在if()条件中赋值,但它没有按预期工作.

尝试过的可能性:

1)

conditionCheck = (getMonth == undefined || getMonth == "" || getMonth == null 
     || getDay == undefined || getDay == "" || getDay == null 
     || getYear == undefined || getYear == "" || getYear == null )

2)

conditionCheck = getMonth == undefined || getMonth == "" || getMonth == null
     || getDay == undefined || getDay == "" || getDay == null 
     || getYear == undefined || getYear == "" || getYear == null 

3) …

我想在给定图像上使用z-index:99显示div'class = perspectiveHomeMenu'.

#perspective {
  display: none;
}
img {
  width: 100%;
  /*for demo*/
  height: 100px;
  /*for demo*/
}
.perspectiveContent-submenuMenu {
  display: none;
}
.perspectiveHomeContent {
  width: 65%;
  margin: 0% 5% 6%;
  background-color: rgb(241, 241, 241);
  float: left;
  padding: 0%;
}
.perspectiveHomeContent .imageAlign {
  float: left;
  width: 100%;
}
.contentHomeAlign {
  float: left;
  margin: 2% 3%;
  width: 98%;
  padding: 1%;
}
.perspectiveHomecontentImage iframe,
.perspectiveHomecontentImage img {
  width: 100% !important;
}
.contentHomeAlign .perspectiveContentHeading {
  font-size: 14pt;
  margin: 0% 0 0;
  color: …

我希望你能看到这个小提琴:

http://jsfiddle.net/qkwkb/7/

HTML

<input id="rad1" type="radio" name="rad" checked>FLAT
<input id="rad2" type="radio" name="rad">3D
<div id="portrait"></div>

CSS

#portrait{
margin-bottom:0px;
margin-top:20px;
width:300px;
height:200px;
background-color:#000;
transition: transform 2s, margin 1s;
-webkit-transition: -webkit-transform 2s, margin 1s;
}

input[type='radio']:checked + #portrait{
margin-left:50px!important;
transform: perspective( 700px ) rotateY( 30deg );
-webkit-transform: perspective( 700px ) rotateY( 30deg );
}

请先在Firefox中打开它,看看它是如何正常工作的,然后在Chrome中打开以查看它是否有问题.我做错什么了吗？或者它确实是一个错误？

Firefox甚至不需要-moz-来生成转换和转换.. Chrome似乎有点问题..

我可以在所有浏览器中使用正确的动画吗？歌剧,即野生动物园？

假设我有这个

<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>


ul {
   column-count: 2;
}

我想将第一列对齐,第二列对齐,是否有任何方法可以使用css选择器来定位其中一列？

background: url("images/main_bg.png") repeat;

是style.css中的标题/横幅背景图片,但不知道如何在它周围获得阴影......

我试过了

body {
    font-family: Arial,Helvetica,sans-serif;    
    font-size: 13px;
    color: #333333;
    background: url("images/main_bg.png") repeat;
    box-shadow: 0 0 5px 2px #282a2d;
    line-height: 1.4;
}

但那没有成功......

我有外部 div 部分，在外部 div 内，我在鼠标悬停时有内部 div 部分，我只希望外部 div 部分应该是过渡，而内部 div 部分文本不应该过渡应该保持不变，有人帮助我实现它。

谢谢！

http://jsfiddle.net/zeYZL/56/

超文本标记语言

  <div class="outer">
        <div class='inner'>
            <p>inner text</p>
        </div>
    </div>

CSS

 .outer
{
  width:283px;
  height:298px;
  float:left;
  background:#101820;
  color:#fff;
  font-family:Lato;
  font-weight:900;
  font-size:3.4em;
  text-align:center;
  line-height:298px;
  transition:all 0.3s ease;
}
.outer:hover
{
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.03);
  width:283px;
  height:298px;
  cursor:pointer;
  background-color:#ffa300;
}