在父div元素中的两个子元素

Question

如下所示，父元素中有两个div元素。其中一个元素的宽度为100像素，另一个覆盖整个剩余宽度。我想根据父div的大小使第二个div元素具有可变宽度，但第一个div元素保持不变。（css pure pls）

Two child elements in a widget with constant width and variable width

.comments {
    width: 100%;
    height: auto;
    float: right;
    border-bottom: solid 1px #ddd;
}

.comments-text {
    width: 80%;
    height: auto;
    float: right;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    text-align: justify;
}

.comments-img {
    width: 20%;
    height: auto;
    float: right;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .comments-img img {
        width: 75px;
        height: 75px;
        float: right;
        border-radius: 50%;
    }

.comments-text b,
.comments-text .comments-body {
    float: right;
}

.comments-text b {
    color: #0c80df;
}

.comments-date {
    float: left;
    color: #333;
    font-size: 10px;
}

.comments-body {
    direction: rtl;
}

<div class="comments">
        <div class="comments-img">
            <img src="http://xup.ir/images/37358315942326655914.png" />
        </div>

        <div class="comments-text">
            <b>
                username
            </b>
            <br />
            <span class="comments-body">
                text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
            </span>
            <br />
            <span class="comments-date">
                2018.08.06
            </span>
        </div>
    </div>

Answer 1

我认为您需要更多了解css calc。

如果我非常了解你的问题，你需要做这样的事情：

#parent {
  width: 390px;
  border: 1px solid blue;
  height: 80px;
}

#first-child {
  width: 20%;
  height: 70px;
  border: 1px solid red;
  margin: 5px 0 5px 2%;
  float: left;
  box-sizing: border-box;
}

#second-child {
  /*  Now we using % for width  */
  width: 74%;
  border: 1px solid green;
  float: left;
  height: 70px;
  margin: 5px 2%;
  box-sizing: border-box;
}

HTML part

<div id="parent">
  <div id="first-child"></div>
  <div id="second-child"></div>
</div>

Answer 2

尝试使用如下所示的flex。

基本上我更新了这种风格

.comments {
    width: 100%;
    height: auto;
    display: flex;
    border-bottom: solid 1px #ddd;
    flex-direction: row-reverse;
}

删除了所有浮动属性。

＆＃13;

＆＃13;

.comments {
    width: 100%;
    height: auto;
    display: flex;
    border-bottom: solid 1px #ddd;
    flex-direction: row-reverse;
}

.comments-text {
    width: 100%;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    text-align: justify;
}

.comments-img {
    width: 100px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .comments-img img {
        width: 75px;
        height: 75px;
        border-radius: 50%;
    }

   
.comments-text b {
    color: #0c80df;
}

.comments-date {
    color: #333;
    font-size: 10px;
}

＆＃13;

<div class="comments">
        <div class="comments-img">
            <img src="http://xup.ir/images/37358315942326655914.png" />
        </div>

        <div class="comments-text">
            <b>
                username
            </b>
            <br />
            <span class="comments-body">
                text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
            </span>
            <br />
            <span class="comments-date">
                2018.08.06
            </span>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;