css,对包含有子元素的元素进行flex后,会影响原有的布局。如何后续处理

对包含有子元素的元素进行flex后,会影响原有的布局。

例如设置两个div,第一个div包含一个img(图片),第二个div包含多个p元素(对前面的img的说明)。如下图

1:当对着两个两个div进行flex布局后。虽然两个div会同时处在一行内。但第二个div内部多个p元素的排序会被打乱,因为p元素的父元素div被应用了display:flex;后,已经改变了其主轴方向,所有的p元素都会横向排列,而不是原来的纵向排列

2:为了让两个div再同一行内,同时第二个div内部的多个p元素仍按照原有的块元素排序,需要对第二个div。需对第二个div作如下处理。

display:flex;

flex-direction:column;

则会重新改变第二个div的主轴方向。从而得到我们想要的结果。

结果如下:

原文地址:https://www.cnblogs.com/yt0817/p/11825734.html

时间: 2024-12-21 20:16:09

css,对包含有子元素的元素进行flex后,会影响原有的布局。如何后续处理的相关文章

children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

children([expr]) 概述 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合. 可以通过可选的表达式来过滤所匹配的子元素.注意:parents()将查找所有祖辈元素,而children()只考虑子元素而不考虑所有后代元素.大理石量具哪家好 参数 exprStringV1.0 用以过滤子元素的表达式 示例 描述: 查找DIV中的每个子元素. HTML 代码: <p>Hello</p><div><span>Hello Again</

css中元素的浮动和清除浮动的影响

用float属性可以使元素浮动到包含框内的左右边使文本围绕它,这里创建一个包含框内有段落和一个小的div并被包围: <html> <head> <title><title> <style type="text/css"> div{ border:1px solid red; width:200px; height:200px; } .div1{ background-color:yellow; float:right; wid

关于css中伪类及伪元素的总结

css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有“段落的第一行”.“文章首字母”之类的选择器,而这在一些出版场景里又是必须的,这一情况下出现的.引用标准中的话: CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on infor

[ jquery 过滤器 prev([expr]) ] 此方法用于在选择器的基础之上搜索查找取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合,可以用一个可选的表达式进行筛选.只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素 expr 用于筛选前一个同辈元素的表达式 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <

[ jquery 过滤器 siblings(expr) ] 此方法用于在选择器的基础之上搜索取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合,可以用可选的表达式进行筛选

此方法用于在选择器的基础之上搜索取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合,可以用可选的表达式进行筛选 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='

[ jquery 选择器 :contains(text) ] 此方法选取包含给定文本的元素

匹配包含给定文本的元素,参数解析如下: 1.text:给定文本 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,k

.has()——选取包含某条件的元素

描述:选择元素内部是否存在包含给定条件的元素 写法:$("元素").has("class或id值等") 注意:与.filter()的区别 $("div").has("span").css("background","red"); <div>div1<span>span</span></div> 这个变色 <div>div2<

jquery内容选择器(匹配包含指定选择器的元素)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>内容选择器</title> &

CSS中伪类及伪元素用法详解

原文:CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active  大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上. 写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hover.: