Css Grid Wrap列保持行高

时间:2017-08-15 10:14:18

标签: css css-grid

我不确定css grid和/或css flexbox是否可以解决这个问题,但我想我会尝试一下这里问一下。

https://codepen.io/anon/pen/QMOWwr

在codepen中,您会看到一个包含多个列的css网格,当视口太小时会对其进行换行。这就是它应该做的事情,用css网格这很容易。

但是,对于我想要的另外一点是,根据该行中具有最高高度的单元格,行高度相等。

为了说明这一点,我在每列的一个单元格中添加了更多文字,并在<hr>元素中添加了一些模拟边框的内容 - 因此,说到这里,我希望<hr>标签位于对于单元格内的任意内容,每列中的高度相同。

任何提示的Thx, 的Marius

1 个答案:

答案 0 :(得分:0)

一种解决方案是使用JavaScript检查每行中每个单元格的最大高度,然后相应地调整所有其他单元格的大小。

像这样:https://codepen.io/anon/pen/rzYaEY

然而,或许更惯用的解决方案就是使用<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/facebookBlue" tools:context="com.test.practise.TeamActivity"> <TextView android:id="@+id/textView" android:layout_width="290dp" android:layout_height="41dp" android:layout_above="@+id/textView2" android:layout_centerHorizontal="true" android:layout_marginBottom="30dp" android:gravity="center" android:text="Bournemouth University" android:textColor="@android:color/background_light" android:textSize="24sp" tools:layout_editor_absoluteX="65dp" tools:layout_editor_absoluteY="105dp" /> <TextView android:id="@+id/textView2" android:layout_width="129dp" android:layout_height="34dp" android:layout_marginBottom="70dp" android:gravity="center" android:text="Team Mode" android:textColor="@android:color/background_light" android:textSize="24sp" tools:layout_editor_absoluteX="128dp" tools:layout_editor_absoluteY="169dp" android:layout_above="@+id/et_team" android:layout_centerHorizontal="true" /> <EditText android:id="@+id/et_team" android:layout_width="232dp" android:layout_height="37dp" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:background="@android:color/background_light" android:ems="10" android:hint="Team Name" android:imeOptions="actionDone" android:inputType="text" android:singleLine="true" tools:layout_editor_absoluteX="78dp" tools:layout_editor_absoluteY="258dp" /> <android.support.v7.widget.AppCompatButton android:id="@+id/btn_submit_team" android:layout_width="239dp" android:layout_height="43dp" android:layout_alignEnd="@+id/et_team" android:layout_alignLeft="@+id/et_team" android:layout_alignRight="@+id/et_team" android:layout_alignStart="@+id/et_team" android:layout_below="@+id/et_team" android:layout_marginTop="38dp" android:background="@color/colorPrimaryDark" android:elevation="23dp" android:text="OK, go!" android:textColor="@android:color/background_light" tools:layout_editor_absoluteX="75dp" tools:layout_editor_absoluteY="325dp" /> <TextView android:id="@+id/tv_login" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginBottom="23dp" android:layout_marginLeft="27dp" android:layout_marginStart="27dp" android:text="Admin? Click Here" android:textColor="@android:color/background_light" tools:layout_editor_absoluteX="39dp" tools:layout_editor_absoluteY="475dp" /> <ProgressBar android:id="@+id/progress" style="@style/Base.Widget.AppCompat.ProgressBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_below="@+id/btn_submit_team" android:layout_marginTop="26dp" android:indeterminate="true" android:visibility="invisible" /> 元素并相应地设置它。