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

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

0

2个回答

.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

没改代码直接按原html代码保存的php?
CSS是引用的文件,还在在代码中的?

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
div 等块级标签横向排列的方法总结
块级标签的默认文档流是上下排列的,再配上横向排列的方法,请过适当的嵌套,可以应对几乎所有常见的布局需求,因此,我决定总结一下 div 横向排列的方法。这也是我初学前端时最困扰的问题~
flex实现横向等高流式布局
最近在做页面的时候,需要用到横向瀑布流布局,类似于百度图片展示页面的效果,简单看了一下,发现使用flex布局可以在纯CSS实现,做一下笔记。首先,说明几个相关知识点:1、flex-grow。这个属性可以让内容适应容器,始终保持容器处理填满的状态。2、object-fit: cover。这个属性是img标签的属性,效果是适当裁切图片,保证图片不被拉伸,类似于background-size:cover...
从零开始学习HTML+CSS(4)Flex布局中的排列与换行
Flex布局中的排列与换行
weex 可用样式,与唯一布局方式flex
Weex 布局模型基于 CSS Flexbox,Flexbox 是默认且唯一的布局模型,所以你不需要手动为元素添加 display: flex; 属性。 对于刚开始接触 weex想把它当html5,css3使用的我,在没看文档的情况下也是蒙蔽了, 比如以级css样式,暂不支持简写 border:1px solid #fff 或者background :#ff4fe00; 以及line
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 实现div横向等间距排列
csss实现div横向等间距排列 在很多时候,都会遇到div的横向等间距排列问题,像下图这种排列,就是典型的div等间距排列。 &lt;div class="context"&gt; &lt;div class="list"&gt;list1&lt;/div&gt; &lt;div class="list"&gt;list1&lt;/div&gt; &lt;div...
flex布局垂直倒序
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt;    &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;    &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;    &amp;lt;style&amp;gt;        *{            padding:0;     
flex4的布局
• horizontalAlign: 布局元素的水平对齐方式,可能的值有 "left"、 "center"或 "right"。 • verticalAlign: 布局元素的竖直对齐方式,可能的值有 "top"、 "middle"或 "bottom"。 Flex4相对Flex3在标签上有很大改动,Flex4的布局采用s标签的形式来配置。看下面这个例子:首先对整个面板定义了VerticalLayo
处理flex布局中多个模块横向显示,尾部行信息的元素数量不够造成的视图不对齐的转换算法
/** * 转换评价信息的imgs数据结构 * @param data 需要的转换Imgs数据信息 */ const getImgs = (data) =&gt; { data.forEach((item, index, arr) =&gt; { //判断当前img是否为img所对应的行的第一个img if ((index + 1) % 3 !== 0) { item['margi...
水平排列元素的底部对齐
最终运行结果 HTML结构<div class="parent"> <div class="child" style="height: 200px; width:50px; background-color: red;">red</div> <div class="child" style="height: 140px; width:50px; background-color
css3 从左到右自动换行和多行排列方式
如果一行放不下就会自动换行 flex-wrap: wrap; .box{ display: flex; justify-content: space-between;//左右布局 width:300px; height: 300px; background: pink; flex-wrap: wrap; } .child1 ,.child2{ backgroun...
伸缩布局等份flex
响应式的布局,跟着浏览器的变化而变化1.给父元素设置flex布局<section> <div></div> <div></div> <div></div> </section>//CSS section { display: flex; width:800px; height: 100px; } section div:nth-child(1) {
两个div水平排列
&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title...
水平排列元素(高度不同)的底部对齐方式
今天工作中有一个需求,需要将所有的图片底部对齐,高度大小不同,图片就用简单的div来代替 HTML如下: &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;parent&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quo
百度图片横向瀑布流笔记
视频讲解:http://bbs.mafengshe.com/t 实现目标: 1.除了最后一行,其余左右对齐; 2.没有拉伸; 3.最后一行,相同效果,但只有左对齐; 4.hover时显示下方的文字,颜色渐变,居中(注意,当下方文字长显示不全时,变成省略号) 概念: 瀑布流:纵向 流式布局:横向 实现方法: 1.每个img外加上div.为了实现hover及文字包裹
小程序图片排列扭曲问题
可以看到上面两排图片不对齐,后来发现是因为每个图片外面的view设置了padding: .sec3_images>view>view>view{ display: flex; flex-direction:column; width: 49.5%; padding:1%; }把padding去掉就ok。
flex布局之 5个div盒子位置的排列
、   直接上图   前三个盒子用felx布局 最后一个盒子用定位 过去 代码如下 .box{ width: 800px; height: 600px; border: 1px solid purple; display: flex; flex-direction: row; justify-content: space; flex-wrap: wrap...
多个div排列在同一行而不换行
有时候,我们可能会产生多个div标签横向排列而不换行的需求,具体有以下几种实现方法:1. 同级div设置display:inline-block,父级div强制不换行例如:<html> <head></head> <body> <div id="container"> <div class="lable">测试测试</div> <div class="lable">测试测试</d
纯css实现瀑布流(multi-column和flex布局)
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实现瀑布流 先简单的讲下multi-column相关的部分属性 column-count设置列数 column-gap设置列与列之间的间距 column-width设置每列的宽度 还要结合在子...
Flex 布局中,让元素横向排开后,让最后一个元素靠右边
如图 , 让上面的最后面的图片靠最右边: 给第二个元素加:margin-right:auto;结果:
微信小程序样式Flex Box精通课程-Flex容器的属性-flex-direction 项目排列方向
flex-direction 项目排列方向 基础语法 flex-direction属性决定主轴的方向(即项目的排列方向):(左中右 上中下) .box { flex-direction: row | row-reverse | column | column-reverse; }  row(默认值):主轴为水平方向,起点在左端。  row-reverse:主轴为水平方向,起点在右端。...
CSS —— 盒子模型(Flexbox 布局方式)
目录 传统盒模型 Flexbox 布局方式 Flexbox 核心概念 Flex 容器属性 flex-direction :项目元素排列的方向 flex-wrap :项目元素排列方式 justify-content : 项目在主轴上的对齐方式 align-items :项目在交叉轴上的对齐方式 align-content :多行项目的排列方式 Flex 项目属性 order :项...
ul实现横向排列不换行的两种解决方案
刚学前端不久,尝试着写各种布局。今天想实现一个横向排列的照片列表,于是最先想到的就是利用ul将list-style设置为none。但是这样只是仅仅将ul默认为横向排列,并没有限制ul一定不换行。当ul设置的宽度不足以容下图片时,图片就会自动换行。 于是查阅资料和相关布局属性。最终找出了两种解决方案。
css横向布局的几种方式
    首先我们先看看 html部分  bodyTip 内的三个标签我们需要让他们横向显示并且根据浏览器宽度平均显示 &amp;lt;body&amp;gt; &amp;lt;!--头部--&amp;gt; &amp;lt;div class=&quot;head&quot;&amp;gt; 我是头部 &amp;lt;/div&amp;gt; &amp;lt;div class=&quot;bodyTip&quot;&amp;gt; &amp;lt;!--左边--&amp;gt;
微信小程序填坑---scroll-view横向滚动
问题描述 scroll-view写横向tab滚动 &amp;lt;scroll-view scroll-x=&quot;true&quot; class=&quot;container&quot;&amp;gt; &amp;lt;view class=&quot;item&quot;&amp;gt;全部&amp;lt;/view&amp;gt; &amp;lt;view class=&quot;item&quot;&amp;gt;风景&amp;lt;/view&amp;gt;
flex布局实现等分
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .color_container { width: 100%; height: 22px; ...
Css3实现百度图片的横向瀑布流布局——内含解决object-fit兼容性问题
最近公司在做项目的时候需要用到横向瀑布流布局,在实现的过程中还遇到了object-fit兼容性问题,这里记录一下整个过程,想直接复制代码可以直接滚到底部。 在此先上个效果图: (希望不要吐槽里面的小哥哥)下面正题: 用的框架是vue,v-for一下: &amp;lt;section&amp;gt; // v-for就是根据imagesList数组去循环下面这个div部分。 &amp;lt;div c...
div横向排列
div横向排列 div横向排列
c:forEach 一行排三个图片然后自动换行
body style=&quot;margin:0px&quot;&amp;gt;      &amp;lt;table width=&quot;100%&quot; border=&quot;0&quot;&amp;gt;                            &amp;lt;tr&amp;gt;      &amp;lt;div id=&quot;xlxka&quot;&amp;gt;      &amp;lt;table bgcolor=&q
《React-Native系列》11、 图解RN布局之FlexBox,三分钟上手写RN界面
前面其实已经写过很多RN界面了,今天再来回顾下FlexBox布局,主要是记录笔记,必备日后查阅。 综述 flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。采用flex布局的元素,称为flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称"项目"。 f
jqury实现的横向排序的瀑布流
用jquery实现的横向排序的瀑布流布局
Flex DataGrid优化横向滚动条
DataGrid如果列太多,那么横向拉动很卡,优化如下: [url]http://blogs.adobe.com/aharui/2008/11/faster_datagrid_horizontal_scr.html[/url]
Flex中表格数据排序,支持全部类型
"1.0" encoding="utf-8"?>   //blog.flexexamples.com/2007/08/23/determining-a-datagridcolumn-objects-current-sort-order/ -->   "DataGridColumn_sortDescending_test"           xmlns:mx="http://www.adob
flex实现div/li等水平居中布局
flex大家在开发的时候应该用到过,实现块级元素水平居中布局的方法挺多,本文讲一下不用浮动,用flex实现div水平布局,效果图: 为了方便,本文使用li举例,div同理。代码如下: /*css*/ .ulBox{ display: flex; justify-content: center; width: 100%;padding: 20px;bord...
flex布局不兼容ie怎么设置
以下浏览器支持flex布局方式 IE10+、Edge、Firefox 2+、Chrome 4+、Safari 3.1+ 以下浏览器支持标准的flex布局方式(不需要加私有属性前缀) Edge、Firefox 28+、Chrome 29+、Safari 9+ 想要支持ie低版本 同时使用 display: flex; float: left; 例: div{ dis...
CSS3中li元素自动横向排列、多栏div自动横向排列的简单方法
在传统的的css中,要想实现li元素横向排列,需要用到float属性,如果使用不熟练往往引起布局的错乱。css3中提供了一种非常好的实现机制。li元素的宽度、换行等都可自动完成,并根据窗口尺寸自动调整,呈现出一定程度的响应式布局。在Chrome,Edge,IE11中显示结果都一样。 而多栏div自动横向排列的方法与上面的相似。完整代码<!DOCTYPE html> <html> <head
css3 flex流动自适应响应式布局样式类
今天在做一个水平居中的div内部元素贴边水平均匀布局(有点绕,直接看图吧), 一开始使用的都是一些比较常用的css+html方法来实现布局,感觉这样很死板(在多增加一个div,并未div设置相应的一个负的margin-left,此值需要通过计算得到), 于是便想到了css3的flex流式布局,于是上网找了一些资料: 1、css3 flex 一旦一个容器赋予了disp
view (十种)基础排列样式
wxml &amp;lt;view class=&quot;view-flex&quot;&amp;gt; &amp;lt;view class=&quot;item1&quot;&amp;gt;1&amp;lt;/view&amp;gt; &amp;lt;view class=&quot;item1&quot;&amp;gt;2&amp;lt;/view&amp;gt; &amp;lt;view class=&quot;item1&quot;&amp;gt;3&amp;lt;/view&a
display:flex 均等排列 一行排两列或者多列,最后的元素靠左对齐
display:flex flex-direction属性决定主轴的方向(即项目的排列方向)。 flex-direction: row | row-reverse | column | column-reverse; row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-rever...
CSS实现div或ul,li水平对齐不换行
  去掉A标签的:    增加li标签:    在网页前端开发中,我们可能会经常用到走马灯特效,于是乎就需要用CSS来实现文字或图 片水平对齐但不换行的效果,用div+table可是很实现这个效果,但是要用div或ul,li来做就难了,大部分人都会想到用 overflow:hidden+固定宽度width来控制div或li浮动元素不会换行,但这样效果很差或根本无效。其实我们只需要...