Question

我已设置父div及其3个子div。现在，第三个孩子被隐藏了。我已将第一个孩子的宽度设置为20％，并希望第二个孩子自动获取剩余宽度而不明确设置。第3个孩子的宽度是20％，当它被取消隐藏时，它应该占据父母宽度的一部分，而第2个孩子应该相应地重新调整其宽度。

public void inputDialog() {

    LayoutInflater layoutInflaterAndroid = LayoutInflater.from(context);
    final View mView = layoutInflaterAndroid.inflate(R.layout.layout_dialog, null);
    final AlertDialog.Builder alertDialogBuilderUserInput = new AlertDialog.Builder(context);

    final EditText acceptUserInput = (EditText) mView.findViewById(R.id.acceptUserInput);

    alertDialogBuilderUserInput.setView(mView);

    alertDialogBuilderUserInput
            .setCancelable(false)
            .setPositiveButton("SAVE", null)
            .setNegativeButton("CLOSE",null);

    final AlertDialog alertDialogAndroid = alertDialogBuilderUserInput.create();
    alertDialogAndroid.show();
    alertDialogAndroid.getButton(AlertDialog.BUTTON_POSITIVE).setOnClickListener(new View.OnClickListener()
    {
        @Override
        public void onClick(View v)
        {
            String strUserInput = acceptUserInput.getText().toString().trim();
            if(TextUtils.isEmpty(strUserInput)) {

                Snackbar snackbar = Snackbar.make(mView, "Name field cannot be left blank", Snackbar.LENGTH_LONG);
                snackbar.show();
            }
        }
    });
    alertDialogAndroid.getButton(AlertDialog.BUTTON_NEGATIVE).setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            alertDialogAndroid.cancel();
        }
    });
}

Answer 1

这可以通过flex布局实现。以下是您案例的代码段：

＆＃13;

#parent {
  display: flex;
  flex-direction: row;
}
#child1 {
  flex-basis: 20%;
}
#child2 {
  flex: 1;
}
#child3 {
  display: none;
}

＆＃13;

<div id="parent" style="background-color: pink;">
    <div id="child1" style="background-color: gray;">
        div1
    </div>

    <div id="child2" style="background-color: blue;">
        div2
    </div>

    <div id="child3" style="background-color: violet;">
        div3
    </div>
</div>

＆＃13;

一些解释：

将#parent显示为flex，为所有子元素启动flex布局。
将flex-direction设为row，使子元素水平显示。
将#child2＆＃39; flex设为1，这意味着它会缩小或扩展以占用#parent中的所有可用空间。

请注意，所有内联display CSS规则都已删除。启用弹性布局后，不需要它们。

元素根据父母和兄弟姐妹调整宽度

1 个答案: