Question

在767以下，我希望中间列的日期，到期日和ID应该比另一个（到期日，日期，然后ID或日期，到期日和ID）堆叠起来，其中到期日和ID在日期列之下（位于中间）），这意味着应该有3列，而不是767上方的5列。如何使用CSS做到这一点。如果有什么更好的方法可以响应，请分享。

我应该为移动设备创建单独的一行并将其隐藏在较大的设备上。或者也可以处理同一行，并使中间的三个div一个接一个地堆叠。

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

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	.container {
		width: 80%;
		margin: 0 auto;
		border: 1px solid grey;
		height: 100%;
	}
	.invo-to,.due,.date,.id {
		float: left;
	}
	.invo-from {
		float: right;
		text-align: right;
	}
	.invo-to {
		width: 25%;
	}
	.due,.date,.id {
		width: 16%;
	}
	.invo-from {
		width: 25%;
	}
	h6 {
		font-size: 18px;
		margin: 0;
	}
	p {
		font-size: 16px;
	}
</style>
<body>
<div class="container">
<div class="invo-to">
	<h6>Invoice To</h6>
	<p>John Mason</p>
	<p>john@gmail.com</p>
</div>
<div class="due">
	<h6>Due Date</h6>
	<p>11-05-1990</p>
</div>
<div class="date">
	<h6>Date</h6>
	<p>11-05-1990</p>
</div>
<div class="id">
	<h6>Invoice Id</h6>
	<p>66</p>
</div>
<div class="invo-from">
	<h6>Invoice From</h6>
	<p>Xskd Lksdds di LTD</p>
	<p>lksdds@gmail.com</p>
</div>
</div>
</body>
</html>

Answer 1

替换此代码

sessionInfo()
R version 3.6.0 (2019-04-26)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 18.04.2 LTS

Matrix products: default
BLAS:   /usr/lib/x86_64-linux-gnu/atlas/libblas.so.3.10.3
LAPACK: /usr/lib/x86_64-linux-gnu/atlas/liblapack.so.3.10.3

locale:
 [1] LC_CTYPE=en_US.UTF-8       LC_NUMERIC=C              
 [3] LC_TIME=en_US.UTF-8        LC_COLLATE=en_US.UTF-8    
 [5] LC_MONETARY=en_US.UTF-8    LC_MESSAGES=en_US.UTF-8   
 [7] LC_PAPER=en_US.UTF-8       LC_NAME=C                 
 [9] LC_ADDRESS=C               LC_TELEPHONE=C            
[11] LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C       

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] ggthemes_4.2.0 ggplot2_3.1.1 

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.1       rstudioapi_0.10  magrittr_1.5     tidyselect_0.2.5
 [5] munsell_0.5.0    colorspace_1.4-1 R6_2.4.0         rlang_0.3.4.9003
 [9] stringr_1.4.0    plyr_1.8.4       dplyr_0.8.1      tools_3.6.0     
[13] grid_3.6.0       gtable_0.3.0     withr_2.1.2      lazyeval_0.2.2  
[17] assertthat_0.2.1 tibble_2.1.1     crayon_1.3.4     purrr_0.3.2     
[21] vctrs_0.1.0.9003 zeallot_0.1.0    glue_1.3.1       labeling_0.3    
[25] stringi_1.4.3    compiler_3.6.0   pillar_1.4.0     scales_1.0.0    
[29] backports_1.1.4  pkgconfig_2.0.2

Answer 2

为了创建响应式网页，最好使用引导程序，它是一种更简便快捷的方法，但是如果您暂时无法学习引导程序，则可以使用flexbox和媒体查询。

Flexbox使您无需使用浮动即可创建响应式布局属性，建议您学习它，因为它非常强大，在这种情况下，您需要2个属性，display:flex;启用flexbox和flex-direction:row或flex-direction: column;设置flexbox中块的方向https://www.w3schools.com/css/css3_flexbox.asp
媒体查询可在某些条件下定义css属性，可用于不同类型的屏幕，此工具对于创建响应式网站非常有用，要使其启用，您需要@media condition，条件可以是宽度屏幕尺寸或屏幕类型... https://www.w3schools.com/css/css_rwd_mediaqueries.asp

以下代码将对其进行更好的解释：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	.container {
		width: 90%;
    border: 1px solid grey;
		margin: 0 auto;
		height: 100%;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
	}

	.invo-from {
  padding-right:15px;
		text-align: right;
    	width: 30%;
	}
	.invo-to {
		width: 30%;
    padding-left:15px;
	}
	.due,.date,.id {
		width: 100%;
    
	}
	
	h6 {
		font-size: 18px;
		margin: 0;
	}
	p {
		font-size: 16px;
	}
  .stacked{
    width: 50%;
    display:flex;
    flex-direction: row;
  }
  @media screen and (max-width: 767px) {
   .stacked{
    width: 40%;
     text-align:center;
    flex-direction: column;
  }
}
</style>
<body>
<div class="container">
<div class="invo-to">
	<h6>Invoice To</h6>
	<p>John Mason</p>
	<p>john@gmail.com</p>
</div>
<div class="stacked">
<div class="due">
	<h6>Due Date</h6>
	<p>11-05-1990</p>
</div>
<div class="date">
	<h6>Date</h6>
	<p>11-05-1990</p>
</div>
<div class="id">
	<h6>Invoice Id</h6>
	<p>66</p>
</div>
</div>
<div class="invo-from">
	<h6>Invoice From</h6>
	<p>Xskd Lksdds di LTD</p>
	<p>lksdds@gmail.com</p>
</div>
</div>
</body>
</html>

如何在小型设备上将div位置置于中间列，以使此发票标题具有响应性

2 个答案: