Question

所以基本上我有一个包含5个内部div的外部div。

------------------------------------
| <div title>                       |   

|             <div value><div unit> |

|                      <div subvalue|

|                         <div date>|

所以这基本上是我的div。我已经将外部div的宽度和高度设置为自动，因为我认为如果我希望它具有响应性，我应该这样做。我需要给div高度和宽度，但内部元素保持响应性（例如：标题应保留在左侧，值应保留在整个容器的中间，即使它随单元变大，剩下两个应该放在右下角），我也不知道该怎么做，我真的需要帮助：

css代码：

.container{
    border: 1px solid #57c0e8;
    background-color: white;
    cursor: pointer;
    height: auto;
    width: auto;
    border-radius: 10px;
}

.title {
    color:grey;
    font-size: 0.8em;
    margin-left:2%;
}

.valueAndUnit {
    text-align: center;
    display: block;  
}

.value{
    margin-top: 3%;
    min-height:25px;
    font-size: 2.1em;
    display: inline-block;
}

.unit {
    display: inline-block;
}

.subValue {
    text-align: right;
    min-height:25px;
    font-size:1em;
}   

.date {
    min-height:25px;
    color:lightslategrey;
    text-align: right;
    font-size: 1em;
}

.subValueAndDate {
    margin-right: 6%;
}

@media only screen and (max-width: 770px) {

    .title { 
       font-size: 1.3vw; 
    }
    .value{
        font-size: 3.1vw;
    }

 .unit{
     font-size:2vw;
 }

 .subValue{
     font-size:2.5vw;
 }

 }

这是实际的容器：

html：

<div className={styles.container}>
            <div className={styles.title}>
            {title}
            </div>
            <div className={styles.valueAndUnit} style={style}>
            <div className={styles.value}>
            {value}
            </div>
            <div className={styles.unit}>
            {unit}
            </div>
            </div>
            <div className={styles.subValueAndDate}>
            <div className={styles.subValue}>
            {subValue}
            </div>
            <div className={styles.date}>
            {date}
            </div>
            </div>
        </div>

Answer 1

自从标记了Bootstrap之后，您就可以利用框架的Grid样式，并使用flexbox类进行一些细微的调整。

HTML：

<div class="outer-div">
    <div class="row d-flex">
        <div class="col-6 text-left">
            yes
        </div>
    </div>
    <div class="row d-flex">
        <div class="col-12 text-center">
            1111 unit
        </div>
    </div>
    <div class="row d-flex flex-row-reverse">
        <div class="col-6 text-right">
            1234
        </div>
    </div>
    <div class="row d-flex flex-row-reverse">
        <div class="col-10 text-right">
            05/14/3030 4:12
        </div>
    </div>
</div>

CSS：

.outer-div {
    border: solid green 1px;
    border-radius: 5px;
    width: 35%;
    margin-left: 30%;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 1%;
}

代码段示例：

.outer-div {
	border: solid green 1px;
	border-radius: 5px;
	width: 35%;
	margin-left: 30%;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 1%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="outer-div">
	<div class="row d-flex">
		<div class="col-6 text-left">
			yes
		</div>
	</div>
	<div class="row d-flex">
		<div class="col-12 text-center">
			1111 unit
		</div>
	</div>
	<div class="row d-flex flex-row-reverse">
		<div class="col-6 text-right">
			1234
		</div>
	</div>
	<div class="row d-flex flex-row-reverse">
		<div class="col-10 text-right">
			05/14/3030 4:12
		</div>
	</div>
</div>

Codepen示例here。

使div元素在容器内响应

1 个答案: