我不确定css grid和/或css flexbox是否可以解决这个问题,但我想我会尝试一下这里问一下。
https://codepen.io/anon/pen/QMOWwr
在codepen中,您会看到一个包含多个列的css网格,当视口太小时会对其进行换行。这就是它应该做的事情,用css网格这很容易。
但是,对于我想要的另外一点是,根据该行中具有最高高度的单元格,行高度相等。
为了说明这一点,我在每列的一个单元格中添加了更多文字,并在<hr>
元素中添加了一些模拟边框的内容 - 因此,说到这里,我希望<hr>
标签位于对于单元格内的任意内容,每列中的高度相同。
任何提示的Thx, 的Marius
答案 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" />
元素并相应地设置它。