个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我想在窗口大小减小时增加图像大小，为此我使用了媒体查询。每当窗口大小为 423 时，图像大小就会增加。所以我尝试使用媒体查询，但它不适用于该标签。如何增加尺寸？这是我的 HTML 和 CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
@media screen and (max-width:768px ) and (min-width: 320px)
{
.samyata {
width:100px;
height:auto;
}
}
</style>
</head>
<body>
<div class="container-fluid text-center" style="background-color:#F2F2F2"><br>
<h3 style="text-align:left;margin-left:12%;font-family: 'Raleway';"> Explore Samyata</h3> <br><br>
<div class="row" id = "first" style="margin-left:7%" >
<div class="col-sm-6">
<img src="Assets/img/sam.png" class = "samyata"
hspace="30" style="width:28%;height:40%;float:left;">
<h5 style="font-family: 'Fira Sans Condensed';text-align: left;">
Get it the way you want </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis';">
A new and effecient retail commerce platform
and ecosystem to bring stores, shoppers and
personal shoppers together in a geographically
specific, simple buying and selling experience.
</p>
<a href = "#" class = "text3"
style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:63%;"> Explore Samayata </a>
</div>
<div class="col-sm-6">
<img src="Assets/img/vahaka.png" hspace = "30" class = "vahaka" style="width:28%;height:40%;float:left;">
<h5 style="font-family: 'Fira Sans Condensed';text-align: left">
Make money as a personal shopper </h5>
<p class="text" style="text-align:left;font-size: 13px;font-family: 'Dosis'">
Deliver shopper purchases.
Be your own boss. Do it when you want.
Get paid right away.
</p>
<a href = "#" class ="text3"
style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:70%"> Explore Vahaka </a>
</div>
</div><br><br>
<div class = "row" style="margin-left:7%">
<div class="col-sm-6" >
<img src="Assets/img/gananam.png" hspace = "30" style="width:28%;height:40%;float:left;">
<h5 style="font-family: 'Fira Sans Condensed';text-align: left;">
Attract shoppers to your stores </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis'">
Partner with Samyata Stores
for a new way to make money,
reach new customers and deliver
products to your customers.</p>
<a href = "#" class = "text3"
style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';
margin-right: 63%"> Explore Gananam </a><br><br><br>
</div>
</div><br>
</div>
</body>
如何应用？请帮我解决这个问题。当窗口大小减小和增大时，我希望所有图像和文本并排放置，但是当我减小时，我会出现图像下方文本的相同部分。我想要图像同一侧的所有文本。 
最佳答案
带有 class="samyata"的 img 具有内联样式(即在样式属性中)。这将始终覆盖样式表中的样式。
解决方案:从属性中取出样式并将其放在媒体查询上方的样式表中。
你的另一个问题，文本环绕在图像下方，可以通过将文本放在它自己的 block 中并给它一个左边距来解决。
.samyata, .vahaka, .gananam {
width: 28%;
height: 40%;
float:left;
}
.row {
padding-bottom: 1em;
}
.block {
margin-left:37%;
}
.col-sm-6 h5 {
margin-top: 0;
font-family: 'Fira Sans Condensed';
text-align: left;
}
@media screen and (max-width: 768px) and (min-width: 320px) {
.samyata, .vahaka, .gananam {
width: 100px;
height: auto;
}
.block {
margin-left:130px;
}
}
</style><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid text-center" style="background-color:#F2F2F2"><br>
<h3 style="text-align:left;margin-left:12%;font-family: 'Raleway';"> Explore Samyata</h3> <br><br>
<div class="row" id="first" style="margin-left:7%">
<div class="col-sm-6">
<img src="/image/rblbG.jpg" class="samyata">
<div class="block">
<h5> Get it the way you want </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis';">
A new and effecient retail commerce platform and ecosystem to bring stores, shoppers and personal shoppers together in a geographically specific, simple buying and selling experience.
</p>
<a href="#" class="text3" style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:63%;"> Explore Samayata </a>
</div>
</div>
</div>
<div class="row" style="margin-left:7%">
<div class="col-sm-6">
<img src="/image/N3atj.jpg" class="vahaka">
<div class="block">
<h5> Make money as a personal shopper </h5>
<p class="text" style="text-align:left;font-size: 13px;font-family: 'Dosis'">
Deliver shopper purchases. Be your own boss. Do it when you want. Get paid right away.
</p>
<a href="#" class="text3" style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';margin-right:70%"> Explore Vahaka </a>
</div>
</div>
</div>
<div class="row" style="margin-left:7%">
<div class="col-sm-6">
<img src="/image/TUvgC.jpg" class="gananam">
<div class="block">
<h5> Attract shoppers to your stores </h5>
<p class="text" style="text-align:left;font-size:13px;font-family: 'Dosis'">
Partner with Samyata Stores for a new way to make money, reach new customers and deliver products to your customers.</p>
<a href="#" class="text3" style="color: #2F80ED;text-align:left;font-family: 'Ubuntu';
margin-right: 63%"> Explore Gananam </a>
</div>
</div>
</div>
</div>另外，不要使用hspace。它已被弃用并且存在兼容性问题。请改用边距。
编辑:我做了一些修改，但我不确定它现在看起来像你想要的那样。因此，请将此视为一项正在进行的工作。
关于css - 如何使用媒体查询增加图像的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51204490/
25
4
0
我有三张 table 。表 A 有选项名称(即颜色、尺寸)。表 B 有选项值名称(即蓝色、红色、黑色等)。表C通过将选项名称id和选项名称值id放在一起来建立关系。 我的查询需要显示值和选项的名称，而
在mysql中，如何计算一行中的非空单元格？我只想计算某些列之间的单元格，比如第 3-10 列之间的单元格。不是所有的列...同样，仅在该行中。 最佳答案 如果你想这样做，只能在 sql 中使用名称而
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 7 年前。 Improve this ques
我正在为版本7.6进行Elasticsearch查询 我的查询是这样的: { "query": { "bool": { "should": [ {
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 7 年前。 Improve this ques
是否可以编写一个查询来检查任一子查询(而不是一个子查询)是否正确？ SELECT * FROM employees e WHERE NOT EXISTS (
我找到了很多关于我的问题的答案，但问题没有解决 我有表格，有数据，例如: Data 1 Data 2 Data 3
以下查询返回错误: 查询: SELECT Id, FirstName, LastName, OwnerId, PersonEmail FROM Account WHERE lower(PersonEm
以下查询返回错误: 查询: SELECT Id, FirstName, LastName, OwnerId, PersonEmail FROM Account WHERE lower(PersonEm
我从 EditText 中获取了 String 值。以及提交查询的按钮。 String sql=editQuery.getText().toString();// SELECT * FROM empl
我有一个或多或少有效的查询(关于结果)，但处理大约需要 45 秒。这对于在 GUI 中呈现数据来说肯定太长了。 所以我的需求是找到一个更快/更高效的查询(几毫秒左右会很好)我的数据表大约有 3000
这是我第一次使用 Stack Overflow，所以我希望我以正确的方式提出这个问题。 我有 2 个 SQL 查询，我正在尝试比较和识别缺失值，尽管我无法将 NULL 字段添加到第二个查询中以识别缺失
什么是动态 SQL 查询？何时需要使用动态 SQL 查询？我使用的是 SQL Server 2005。 最佳答案 这里有几篇文章: Introduction to Dynamic SQL Dynami
include "mysql.php"; $query= "SELECT ID,name,displayname,established,summary,searchlink,im
我有一个查询要“转换”为 mysql。这是查询: select top 5 * from (select id, firstName, lastName, sum(fileSize) as To
通过我的研究，我发现至少从 EF 4.1 开始，EF 查询上的 .ToString() 方法将返回要运行的 SQL。事实上，这对我来说非常有用，使用 Entity Framework 5 和 6。 但
我在构造查询来执行以下操作时遇到问题: 按activity_type_id过滤联系人，仅显示最近事件具有所需activity_type_id或为NULL(无事件)的联系人 表格结构如下: 一个联系人可
如何让我输入数据库的信息在输入数据 5 分钟后自行更新？ 假设我有一张 table : +--+--+-----+ |id|ip|count| +--+--+-----+ |
我正在尝试搜索正好是 4 位数字的 ID，我知道我需要使用 LENGTH() 字符串函数，但找不到如何使用它的示例。我正在尝试以下(和其他变体)但它们不起作用。 SELECT max(car_id)
我有一个在 mysql 上运行良好的 sql 查询(查询 + 连接): select sum(pa.price) from user u , purchase pu , pack pa where (
我是一名优秀的程序员,十分优秀！