I want to know how to specify % on one side and fill in the rest of the column when giving the area value of the column to % in HTML.

If you give the area value of col1 by 60%, I wonder how to fill the remaining space (40%) without specifying the area value for col2. I know it's possible, but I can't think of a way;

html5 html css

2022-09-21 16:12

3 Answers

.html

<div class="container">
  <div class="col1">
    col1
  </div>
  <div class="col2">
    col2
  </div>
</div>

Assuming that there is an HTML markup like the above, I suggest the following two methods.

Solution 1 : How to use Flexbox

https://jsfiddle.net/qy3rmn9w/1/

.container {
  display: flex;
}

.col1 {
  flex-grow: 3;
  background-color: gray;
}

.col2 {
  flex-grow: 2;
  background-color: lightgray;
}

Solution 2 : How to use the table

https://jsfiddle.net/4xa2o39q/

.container {
  display: table;
  width: 100%;
}

.col1 {
  display: table-cell;
  width: 60%;
  background-color: gray;
}

.col2 {
  display: table-cell;
  background-color: lightgray;
}

2022-09-21 16:12

http://hashcode.co.kr/questions/1689

If you look at the answer, there is a similar code, so I hope you can refer to it.

2022-09-21 16:12

Why don't you try css as follows?

.table {
    position: relative;
    width: 100%;

    /* Next, for convenience, add more */
    height: 200px; 
}

.col1 {
    display: inline-block;
    width: 60%;

     /* Next, for convenience, add more */
    height: 100%; 
    background-color: yellow; /* Yellow background*/
}

.col2 {
    display: inline-block;
    position: absolute;
    left: 60%; /* from left 60% */ 
    right: 0; /* to the right */

     /* Next, for convenience, add more */
    height: 100%; 
    background-color: cyan; /* yellow background*/
}

And I think HTML should be done as follows.

<div class="table">
    <div class="col1">Left 60%</div>
    <div class="col2">Remaining right</div>
</div>

I'm not sure what you want.

2022-09-21 16:12

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656