写一个左右两列布局,布局间隔为10像素,他们的宽度相等且把剩下的宽度均分,高度都为300像素,左侧背景颜色红色,右侧蓝色
时间: 2024-05-29 16:09:35 浏览: 22
<!DOCTYPE html>
<html>
<head>
<title>左右两列布局</title>
<style type="text/css">
.container {
display: flex;
flex-wrap: wrap;
margin: 0 -5px;
}
.container > div {
flex: 1;
margin: 0 5px;
height: 300px;
}
.left {
background-color: red;
}
.right {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
相关问题
eclipse线性布局设置按钮水平权重一比二比二比一且高度相等
在Eclipse中,如果你想使用线性布局(LinearLayout)来设置按钮的水平权重为一比二比二比一,并且让这些按钮的高度相等,你可以通过以下步骤来实现:
1. 首先,确保你的布局文件是以`LinearLayout`作为根布局,并且`android:orientation`属性设置为`horizontal`,表示子视图是水平排列的。
2. 接着,为每个按钮设置`android:layout_width`为`0dp`,这是为了使权重生效,因为只有当宽度或高度设置为`0dp`时,权重才会被考虑。
3. 为每个按钮设置`android:layout_weight`属性。第一个按钮设置为`1`,接下来的两个按钮各设置为`2`,最后一个按钮设置为`1`。
4. 最后,设置`android:layout_height`属性为`wrap_content`或`match_parent`(或者是一个固定的值),这取决于你希望按钮的高度如何适应。如果所有按钮的高度应该相等,通常设置为`wrap_content`或相同的固定值即可。
以下是相应的XML代码示例:
```xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Button 2"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Button 3"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 4"/>
</LinearLayout>
```
确保你的按钮样式或其他属性(比如边距)不会影响到它们的最终视觉高度,这样它们才会在界面上看起来高度相同。
html5 如何让一个li的宽度等于另外一个li且高度只有这个li一半
你可以使用CSS的伪元素`::before`或`::after`来实现这个效果。具体的步骤如下:
1. 给这两个li元素的父元素设置`position: relative`,使得子元素的定位相对于父元素。
2. 给其中一个li元素设置`position: absolute`,并且设置`top: 0`和`left: 0`,使其定位于父元素的左上角。
3. 给另外一个li元素设置`position: relative`,并且设置`left: 50%`,使其定位于父元素的水平中心点。
4. 给第一个li元素设置`width: 100%`和`height: 50%`,使其宽度与第二个li元素相等,高度为第二个li元素的一半。
5. 使用伪元素`::before`或`::after`来清除第一个li元素下面的空间,防止第二个li元素被遮挡。例如,可以给第一个li元素的`::after`设置`content: ""`、`display: block`、`height: 50%`和`margin-top: -1px`,使其高度为一半,并且向上移动1像素,覆盖住第一个li元素下面的空间。
示例代码如下:
```html
<ul class="parent">
<li class="li1"></li>
<li class="li2">Hello World!</li>
</ul>
```
```css
.parent {
position: relative;
list-style: none;
padding: 0;
margin: 0;
}
.li1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #ccc;
}
.li1::after {
content: "";
display: block;
height: 50%;
margin-top: -1px;
}
.li2 {
position: relative;
left: 50%;
transform: translateX(-50%);
background-color: #f00;
color: #fff;
padding: 20px;
text-align: center;
}
```