基于django电商网站开发课设报告,宁波网站seo,大健康网站怎么样做,辽宁省建设银行网站前端将两个div在一个长为500px#xff0c;高为300px的div里面并列居中对齐。 要实现将两个 div 元素放置在一个长为500px#xff0c;高为300px的父 div 中#xff0c;一个在左边#xff0c;一个在右边#xff0c;并且居中对齐#xff0c;可以使用Flexbox布局来实现。 高为300px的div里面并列居中对齐。 要实现将两个 div 元素放置在一个长为500px高为300px的父 div 中一个在左边一个在右边并且居中对齐可以使用Flexbox布局来实现。 !DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleDiv Layout Example/title
style
.container {display: flex;width: 500px;height: 300px;justify-content: center;
}.left-div {width: 50%;height: 100%;background-color: lightblue;
}.right-div {width: 50%;height: 100%;background-color: lightcoral;
}
/style
/head
body
div classcontainerdiv classleft-divLeft Div/divdiv classright-divRight Div/div
/div
/body
/html在这个示例中 (1)我们使用Flexbox布局将父 div 设置为 display: flex; 这样它的子元素会在水平方向上排列。 (2) 通过 justify-content: center; 属性我们将子元素居中对齐。 (3)左侧 div 和右侧 div 各占父 div 宽度的50%从而实现一个在左边一个在右边的布局。 (4) 左侧 div 的背景颜色为淡蓝色右侧 div 的背景颜色为淡珊瑚色。
