Question

Suppose there are two divs, A & B.

Div B has been given a width of 900px;

Screen resolution is 500px;

这将导致横向发展。

问题在于我走向正确的时候,我认为,离婚并非100%。

我是否能够使《离婚法》永远填补剩余的空间?

see the image,

enter image description here

为了解释问题,添加以下形象:

“entergraph

Answer 1

原文照发:<0>。

和

body{
min-width:900px;  // total width of your wraper as like wraper width 
}

Answer 2

i 认为你没有浮标:离异

.DivA{
float: left
width: 100%
}

Answer 3

If you use the CSS3 -webkit-box-flex property it will help. But the problem is, it wont work on all the browsers.

Answer 4

您仅可使用<代码>width:<100%/代码>。它将填补空白空间。此外,添加<条码>float:left;职位:relative,用于两个条块。

Answer 5

The problem is: the div container is not expanding over the window width... the divA has autowidth, so it will expand to the container width, the grid div has a min-width greater than the window width (i think... can t see it in the code)

我的回答是:

Html:

<h1>Child Expand Test</h1>
<form action="#">
    <div class="divContainer">
        <div class="divA">
            &nbsp;
        </div> 

        <div class="divGrid">
            &nbsp;
        </div>
    </div>
</form>

CSS: form { /* just to show the form doesn t expand, if you need expand it / / move the answer line to this class */ background-color: silver; padding-top: 1em; padding-bottom: 1em; }

.divContainer {
    display: inline-block; /* this is the answer line, to expand over the window width */
}

.divA { /* this div will expand over the window width */
    background-color: red;
}

.divGrid {
    background-color: blue;
     min-width: 1500px; /* This is the reason why its needed, yo expand one child width over the size of the window */
}

http://jsfiddle.net/bjb7drdm/“rel=“nofollow” http://jsfiddle.net/bjb7drdm/。

Answer 6

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      display: grid;
      grid-template-columns: 1fr;
    }

    .container {
      display: grid;
      grid-template-columns: 1fr auto;
    }

    .divA {
      background-color: lightblue;
      /* Optional styling for divA */
    }

    .divB {
      width: 900px;
      background-color: lightcoral;
      /* Optional styling for divB */
    }
  </style>
</head>
<body>

<div class="container">
  <div class="divA">
  A
  </div>
  <div class="divB">
   B
  </div>
</div>

</body>
</html>

you can make Div A always fill the remaining space by using CSS Flexbox or CSS Grid, which are both layout models in CSS that can help you achieve flexible and responsive designs. Here s an example using Flexbox:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
    }

    .divA {
      flex: 1;
      background-color: lightblue;
      /* Optional styling for divA */
    }

    .divB {
      width: 900px;
      background-color: lightcoral;
      /* Optional styling for divB */
    }
  </style>
</head>
<body>

<div class="container">
  <div class="divA">
    <!-- Content of Div A -->
  </div>
  <div class="divB">
    <!-- Content of Div B -->
  </div>
</div>

</body>
</html>

友情链接