PHP文件为何不支持Flex横向排列? 5C

非常奇怪,我需要做一个PHP的主页面,想用div实现左边固定宽度,右边自适应宽度。看到flex布局非常方便。但同样的代码,保存为html文件打开网页是完全正确的;但如果保存为PHP文件,打开则完全不是我需要的效果。
正确的效果
PHP文件打开的效果

0

1个回答

.parent{
height:500px;

border:1px solid #222;

display:flex;/*设为伸缩容器*/

flex-flow:row;/*伸缩项目单行排列*/

}

.stable{

width:200px;/*固定宽度*/

border:1px solid #ccc;

}

.change{

flex:1;/*这里设置为占比1,填充满剩余空间*/

border:1px solid #ff4400;

}

.Tools{
height:200px;

border:1px solid #222;

display:flex;/*设为伸缩容器*/

flex-flow:row;/*伸缩项目单行排列*/

}

.box-item {
width: 200px;
height: 200px;
line-height: 200px;
vertical-align: middle;
margin: 5px;
background-color: #ffd200;
font-size: 100px;
color: white;
text-align: center;
}

0
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
flex实现横向等高流式布局
最近在做页面的时候,需要用到横向瀑布流布局,类似于百度图片展示页面的效果,简单看了一下,发现使用flex布局可以在纯CSS实现,做一下笔记。首先,说明几个相关知识点:1、flex-grow。这个属性可以让内容适应容器,始终保持容器处理填满的状态。2、object-fit: cover。这个属性是img标签的属性,效果是适当裁切图片,保证图片不被拉伸,类似于background-size:cover...
div 等块级标签横向排列的方法总结
块级标签的默认文档流是上下排列的,再配上横向排列的方法,请过适当的嵌套,可以应对几乎所有常见的布局需求,因此,我决定总结一下 div 横向排列的方法。这也是我初学前端时最困扰的问题~
CSS3中li元素自动横向排列、多栏div自动横向排列的简单方法
在传统的的css中,要想实现li元素横向排列,需要用到float属性,如果使用不熟练往往引起布局的错乱。css3中提供了一种非常好的实现机制。li元素的宽度、换行等都可自动完成,并根据窗口尺寸自动调整,呈现出一定程度的响应式布局。在Chrome,Edge,IE11中显示结果都一样。 而多栏div自动横向排列的方法与上面的相似。完整代码<!DOCTYPE html> <html> <head
CSS横向排序_让多个div盒子并排同行显示
动态div横向排列充满一行,每列大小自适应,最终效果如下: 一行的div个数是不确定的。方法1:使用table布局<div> <table width="100%"> <tr> <td class="tbl">块1</td> <td class="tbl">块2</td> <td class="tb
CSS flex如何均匀排列子元素
高级justify-content: space-between;法 直接使用list的before和after伪元素参与布局 ul class=&quot;share-list&quot;&gt; li class=&quot;share-item&quot;&gt;li&gt; li class=&quot;share-item&quot;&gt;li&gt; li class=&quot;share-item&quot;&gt;li&gt; ul&gt;
伸缩布局等份flex
响应式的布局,跟着浏览器的变化而变化1.给父元素设置flex布局<section> <div></div> <div></div> <div></div> </section>//CSS section { display: flex; width:800px; height: 100px; } section div:nth-child(1) {
safari浏览器下,display:flex;不兼容问题的解决方案
safari浏览器下,有时display:flex会失效,而且不同版本的safari(新、旧浏览器版本),需要添加的语句也不同,display:-webkit-box对应老版本的浏览器,display:-webkit-flex对应新版本的浏览器,如果不确定safari版本的话,最好都加上,添加代码如下: /*safari*/ display:-webkit-box; d...
h5学习笔记:flex
flex部署可以很方便布局横向和垂直纵向的设计。所以在编写小程序可以放心使用。 flex 依旧有浏览器兼容性的问题。但是ie 8 这种浏览器真不管太多了。今晚做一个练习,记录一下之前工作中用到用法。flex是一种常用布局方式,使用这种方式处理一些布局。line-height 用于文本居中的显示 flex 的中间距采取了 justify-content:space-between; 均等的方式实现
百度图片横向瀑布流笔记
视频讲解:http://bbs.mafengshe.com/t 实现目标: 1.除了最后一行,其余左右对齐; 2.没有拉伸; 3.最后一行,相同效果,但只有左对齐; 4.hover时显示下方的文字,颜色渐变,居中(注意,当下方文字长显示不全时,变成省略号) 概念: 瀑布流:纵向 流式布局:横向 实现方法: 1.每个img外加上div.为了实现hover及文字包裹
flex button字竖排显示
由于产品功能的要求,需要让按钮Label垂直显示,看了下Button的源代码,Button 的label文本显示主要依赖于内部textField:IUITextField属性, 那么我们就可以想办法获取到textField的引用,对它进行相关操作设置,就可以让按钮Label垂直排列了.     首先我们需要自定义一个扩展至Button的ButtonExt类,并且定义命名空间:use names