css - 如何在小型设备的中间列中设置 div 位置以使此发票标题具有响应性-6ren

css - 如何在小型设备的中间列中设置 div 位置以使此发票标题具有响应性

转载作者：行者123 更新时间：2023-11-28 14:13:20

26

4

低于 767，我希望中间的列日期、截止日期和 ID 应该堆叠在一起(截止日期、日期，然后是 id 或日期、截止日期和 id，其中截止日期和 id 在日期列下方在中间)这意味着应该有 3 列，而不是宽度超过 767 的五列。如何使用 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>

最佳答案

替换这段代码


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    .container {
        width: 80%;
        margin: 0 auto;
        border: 1px solid grey;
        padding: 15px;
    }
    .details {
        display: flex;
    }
    .invo-to {
        width: 15%;
    }
    .invo-from {
        width: 20%;
    }
    .due_date_id {
        width: 65%;
        display: flex;
        justify-content: space-around;
    }
    h6 {
        font-size: 18px;
        margin: 0;
    }
    p {
        font-size: 16px;
    }
    @media screen and (max-width: 767px) {
    .container {
        width:100%;
    }
    .due_date_id {
        width: 33%;
        display: flex;
        flex-direction: column;
    }
    .invo-to {
        width: 33%;
    }
    .invo-from {
        width: 33%;
    }
    }
</style>
<body>
<div class="container">
    <div class="details">
        <div class="invo-to">
            <h6>Invoice To</h6>
            <p>John Mason</p>
            <p>john@gmail.com</p>
        </div>
        <div class="due_date_id">
            <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>
</div>
</body>
</html>

关于css - 如何在小型设备的中间列中设置 div 位置以使此发票标题具有响应性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56195764/

26

4

0

文章推荐： ruby-on-rails - rails 3.2，bootstrap 和 fontface

文章推荐： javascript - 查找所有数组中的最小公共(public)数

Paypal 发票。沙盒。如何将 "pay"发票？
我正在构建发票系统。我的客户想在不登录 PayPal 帐户的情况下发送 PayPal 发票。我设法使 CreateInvoice() 和 CreateAndSendInvoice() 函数正常工作(
c# - 如何打印车票/发票
有人知道用 C# 或 VB.NET 编写的用于在小型打印机中打印票据的类吗？打印机:EPSON TM-U220PD 感谢您的帮助。最佳答案如果您的发票是可以包含在 Stream 中的内容(例如文件
drupal - 将自定义字段添加到 Ubercart 发票
我的客户有一个基于 ubercart 的商店，运行良好。由于一些内部问题，他需要为每张发票手动添加一个字段。我想知道是否或者更确切地说如何向显示在所有发票上的订单添加自定义字段。最佳答案这是一个老
sql-server - 发票、发票行和修订的数据库设计
我正在为特许经营的 CRM 设计关系数据库的第二次主要迭代(进行了大量重构)，我需要有关用于存储的最佳数据库设计实践的帮助工作发票和发票行用强审计跟踪对每张发票所做的任何更改。当前模式 Inv
PHP MySQL 发票 Material
我在让这段代码正常工作时遇到了一些麻烦。我们的员工可以访问我们网站上的后端系统。这是输入字段等的设置方式: query("SELECT faktura_materialer.id as materia
iOS 创建 PDF 发票
我想在我的 iOS 应用程序中创建一个 PDF 发票(在 Objective-C 或 Swift 中)。我的主要问题是发票可能有几页，这很难通过 Apple 的现有 API(CoreGraphics
database - 订单/发票/支付数据库建模
我正在设计一个具有以下场景的电子商务网站: 客户可以购买商品并创建订单。订单可能有未知费用，将在客户之后添加支付项目的总金额。也就是说，客户支付一定数量的第一。该订单增加了一些费用并改变了总额。客户
stripe-payments - 结账成功后如何生成 strip 发票
令人惊讶的是，在 successfull checkout session 之后无法自动生成发票与 Stripe 。在 Stripe 系统中，发票必须始终先于付款。我不得不通过一堆获取 Paymen
sql - 数据建模草稿/报价/订单/发票
我目前正在做一个小项目，我需要对以下场景进行建模: 场景客户打来电话，他想要一辆新车的报价。销售代表。注册客户信息。销售代表。在系统中创建报价，并将项目添加到报价(汽车)。销售代表。通过电子邮
javascript - 如果我的购物车打开 HTML 发票，我是否应该考虑安全问题？
为了在用户选择“立即购买”时节省交易成本，系统会在新选项卡中打开 HTML 发票，其中包含他们的订单和我们的银行详细信息，供他们进行手动电子转帐。有什么我应该注意的安全问题吗？黑客可以将自己的银行详细
hadoop - 发票、颜色、类型、计数
我有一个下表: Invoice| Colour | Type In_001 | Red | D In_001 | Red | D In_001 | Yellow | E In_002
python - 在python中正确旋转或翻转图像[发票，表格]到正确的方向
我正在尝试将包含发票和表格的图像旋转到正确的方向。我试图找到角度，然后旋转图像。只有少数图像被正确旋转。下面是我试图以正确方向旋转的代码和图像，第一个图像旋转正确，其他图像旋转不正确 import n
postgresql - postgresql 自定义自增字段(发票/订单号)
基本要求是以以下格式创建订单号: (M)M-SSS 其中 MM 代表当前月份，SSSS 代表当月的订单顺序。例如，1-002 代表一月份提交的第二个订单。使用 TRIGGER 我希望自动递增和插入透
paypal - 创建 PayPal 发票、标记为已付款并发送电子邮件
使用 PayPal API，我想在买家在网络应用程序中完成购买后立即通过电子邮件发送一张标记为已付款的发票。这可能吗？如果不使用 API，您将无法为已付发票手动发送电子邮件通知。是吗？最佳答案
xml - 用于商业文件交换(发票、采购订单等)的最佳标准是什么？
如果我需要在系统之间发送和接收业务文档(发票、采购订单、汇款通知书等)，您会推荐什么标准以获得最佳互操作性？为什么？它可以是 XML 或其他形式。最佳答案 UBL (通用商业语言)是这方面的最新尝试
linux - 创建 PDF 发票 - 是否有任何模板解决方案？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。要求我们推荐或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是
stripe-payments - 使用特定发票项目创建 strip 发票，不包括待处理发票项目
我正在尝试创建手动 strip 发票，但不希望它从待处理的发票项目创建发票。例如，我有 3 个待处理的发票项目，我不想包含在这张手动发票中。待定订单项: 第 1 项第 2 项新发票: 第 3 项
stripe-payments - Stripe 发票。第一张发票的开始/创建和结束日期都相同
我正在从我的 API 取回发票，并且我注意到如果有 2 个整月的计费周期，一切都很好 - 但我总是得到一个开始/结束日期和创建日期相同的发票。所以，我最终显示它并且它没有意义......即。假设用
api - 从 API 访问 azure 发票
是否有任何方法 (API) 可以从未在 Azure 中运行的应用程序访问我的 Azure 发票信息？我想获取此信息并每月自动将其添加到我的 ERP 中。谢谢再见最佳答案正如 Andrew 所提
php - Magento 发票 Excel 导出 - 如何更改字段？
我想将一些发票导出到 Microsoft Excel/XML。标准格式效果不太好，因为我需要一些额外的列。我的问题是:文件在哪里生成的？我在哪里设置这些特殊列？提前致谢最佳答案当Invoice

首页

博学

6Ren·AI

商城

css - 如何在小型设备的中间列中设置 div 位置以使此发票标题具有响应性