如何在div中获取图片左侧的文本？
在div中获取图片左侧的文本可以通过以下方法实现：
- 使用HTML和CSS实现：
- 首先，确保你的div中包含一个img标签和一个文本标签，比如使用p标签包裹文本。
- 在CSS中，使用float属性将图片向左浮动，使文本环绕在图片的右侧。
- 设置文本的margin-left属性来给文本留出图片的空间。
- 示例代码：
- 示例代码：
- 使用JavaScript实现：
- 使用JavaScript获取div中的图片和文本元素。
- 使用JavaScript的offsetLeft属性获取图片元素相对于父元素的偏移量。
- 使用JavaScript的innerHTML属性获取文本元素的内容。
- 示例代码：
- 示例代码：
在腾讯云的产品中，与前端开发相关的推荐产品是云服务器（CVM），可以通过链接腾讯云云服务器了解更多信息。该产品提供了高性能的云服务器实例，用于搭建网站、运行应用、存储数据等。
相关·内容
1回答
我遇到了一个问题，当段落到达div时，文本在div后面，我看不到文本。
更清楚的是，访问这个站点：和菜单栏在这些链接中(在菜单栏中)，如果你不能看到问题放大50%的页面，因为在1920x1080你看不到它(你可以，但只是一点点)。我还添加了图片以显示问题(我用黄色标记标记)：
浏览 0提问于2014-03-10得票数 0
回答已采纳
我有一个带有文本框的表单，它被拉伸到表单的大部分部分。然后，通过在控件上调用BringToFront()，向表单中添加了一个图片框，在文本框顶部的特定条件下，该框将是可见的。
当我在运行应用程序时调整窗体的大小时，图片框的位置不会根据窗体大小而改变。它总是呆在一个地方。是否有任何属性有助于将图片框始终保持在窗体的中间。
谢谢!
浏览 3提问于2014-11-04得票数 1
回答已采纳
我需要复制下面的图片。
中间的图像是我的背景。在我的第一天，我收到了一些短信。在这个div上，我可能需要另一个div，它用文本隐藏div的一部分，这样我就可以看到页面的背景了。不管怎么说，我可以在CSS的div中间有一个看不见的方块吗？
我之所以需要这种行为是因为我使用的是视差滚动效应。
浏览 2提问于2013-08-27得票数 2
回答已采纳
我有一个带有图片的div，旁边是一个div，它包含一些文本，包括一些列表(li)，而li的点应该在图片的右边，但是在IE11中，它显示在div中，其中图片在左边。
为了更好地解释这件事，我做了一个小摆设：
HTML:
<div id="container">
<div id="pic">
<img src="http://www.wallcore.net/wp-content/uploads/2013/09/funny_pic_of_a_monkey-280x280.jpg"/>
浏览 3提问于2013-12-30得票数 2
回答已采纳
1回答
我有一个关于CSS3转换属性(文本旋转)的问题，这是基于我对以下内容的使用；
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
似乎盒子模型发生了一些变化，即顶部/右边/底部/左边的get计算方式不同。同样，宽度/高度和浮子似乎也会受到影响。
以下面的图片为例；
你能简单地解释一下我吗？
--旋转文本(如上面所示的90度)对上/右/下/左填充/边距等的确切影响，说，如果我们有2个浮动元素。具有上面旋转的文本和其他内容的div，如下面所示的；
我想知
浏览 2提问于2011-10-22得票数 5
回答已采纳
4回答
如何在html中生成响应性左侧列
、、、、
我使用2行(页眉和页脚)、1列(左侧)和1主要内容div布局。
这是岩石坚硬的布局。
现在，当我使用Ajax获取数据时，主要内容div拉伸，因为数据&左栏也需要拉伸和连接到页脚，但它没有。
在排序上，我想要响应高度的左侧酒吧。
图片如下
提前谢谢。
浏览 8提问于2016-04-15得票数 0
回答已采纳
1回答
我已经开始使用zurb的Foundation 3了，但是我的滑块上有幻灯片，左边是文字，右边是一个图片(而不仅仅是一个图片和一个标签)。
当我减小浏览器窗口的大小时，除了滑块的高度之外，所有的窗口都适合。
我们需要的是使滑块在小型浏览器上更高(它需要是相同的滑块-而不是替代)。
我知道fluid滑块中有fluid选项，我怀疑如果我改变它，它将足以解决这个问题。
我该如何做到这一点？
以下是我的滑块HTML代码：
<div class="row">
<div class="twelve columns">
<div id=
浏览 3提问于2012-09-23得票数 1
回答已采纳
我希望为我的下一个网站创造下一个效果：
I有3个div，其中左侧列有一些文本内容。i在右列的div中有一个图像，右侧div中的图像有3个不同的独立图像部分，当我悬停在左边列中的一个div(与该特定图像部分相关)上时，必须突出显示每个单独的部分。悬停在上面的DIV也必须在悬停时突出显示。我也想要同样的效果，这一次我只想在右边的DIV中的任何图像部件上悬停。我希望它能突出显示相关的div，以及突出显示图像部分本身。。
我知道这一切听起来可能真的很混乱，所以我做了一张图片，希望能直观地解释我的项目。(检查附呈的图像)。
现在我不确定这是否可以仅仅通过使用CSS来实现，或者通过CSS和jQuery或s
浏览 2提问于2012-03-23得票数 7
回答已采纳
我想要将图片对齐到滑块的最右边，我确实尝试了边距-左侧，但它不是在所有尺寸的屏幕上都有效。我也想让它更有响应性，这样图片在所有尺寸的屏幕上都能保持在最左边。请帮帮忙。下面是滑块的代码。
/********************************/
/* Slides backgrounds */
/********************************/
#first-slider .slide1 {
background-color: blue;
background-size: cover;
background
浏览 15提问于2017-08-30得票数 0
我想在完整的日历标题部分中显示一些文本以及它旁边的图像。
我有一个完整的日历，根据日期在下面的列中显示名称作为标题和相对数据。我想在它旁边显示一个名字和一张图片。我尝试添加html元素进行测试，但没有得到预期的结果。
这是为header赋值的部分
$.map(SomeJSON, function (resourceitem, i) {
var resource = new Object();
resource.id = resourceitem.UserID.toString();
resource.title = resourceitem.UserName;
浏览 0提问于2019-04-17得票数 1
2回答
我正试图从头开始构建一个博客，而且我在图片顶部对齐文本时遇到了困难。目前，文本是对权利的形象，但它是居中。如何使文本与顶部对齐？
HTML
<img class="left" src="images/test.jpg" height="153" width="186" align="left">
<p class="right">bLAH BLAH BLAH</p>
<div style="clear: both"></div&g
浏览 0提问于2013-08-15得票数 0
回答已采纳
5回答
如何将文本放在图像之前？
、、、
我有一张图片，我想把文本放在图片的左边，但我做不到。
以下是我的代码：
<div style="float:right; width:75%;">
<p style="float: left;">Affiliated to Board of Secondary Education Rajasthan, Jhunjhunu International School is purely english medium from LKG to 10th. It is equipped with most modern study and play
浏览 5提问于2013-04-02得票数 0
回答已采纳
我在互联网上搜索了3个多小时，没有一个建议在我的代码中起作用。我正在尝试做的是在每次点击时将图片一个接一个地向左滑动(总共3张图片)，当最后一张图片出现在屏幕上时，停止向左滑动，并滑回到第一张图片。要做到这一点，我需要检测第一张图片的左边距，当它到达某个点(左边180em)，并将其与“em”值进行比较(代码如下所示)。"if“语句从不触发，它总是指向"else”。
我试着用"$('#picture1').offsetLeft"，"$('#picture1').layerX"，"$('#picture
浏览 0提问于2012-05-02得票数 0
回答已采纳
1回答
你好，我是html & css的新手，我有一个问题。我正在使用下面的代码来设置一些图像，上面和下面都有文本，正如您在这里看到的：
但现在我试图在另一个框中重用该代码，但文本并不在需要的位置。这里使用另一种类型的框：
css：
#content{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
}
html：
<div id="content">
<h2>Kleding</h
浏览 0提问于2013-10-20得票数 0
1回答
在引导4.6容器有1320 In的最大宽度。无论是在一行内还是在外部，这个宽度都是相同的。然而，在Bootstrap 5中，这是不一样的，我找不到原因。图片: BT4图片：
-同一网站，但使用BT5：
HTML：
<body>
<div class="container-fluid">
<div class="row">
<div class="container">
</div>
</div>
<div
浏览 0提问于2021-01-30得票数 1
回答已采纳
8回答
我有一个容器div，里面有两个div，一个div是图片，另一个div是文本。我想把文字放在图像上。我用图片position:relative设置div，为文本div设置position:absolute;
HTML：
<div class="headerAds">
<div class="headerAdsPicture">
<img src="img/adsbg.png" alt="Ad background picture">
浏览 3提问于2015-05-20得票数 1
回答已采纳
我有一个标志和一些文字，我想集中在同一行。目前它们在页面的左侧，但不确定如何操作。我将图片和文本都放在一个div中。我使用的css似乎不起作用。.logo_and_text是这两个项目的类
浏览 4提问于2020-03-18得票数 0
我正在寻找一种方法来强制浮动或绝对定位的元素在css中保持在流中。我几乎认为css是愚蠢的，因为它没有像flow这样的东西:on flow:off将它保存在流中或取出它。
问题是我想要一个具有可变高度的div元素，在div中左边有一个浮动图像，并且我希望div至少是图片的高度。我还希望它至少足够大，足以容纳流中的所有文本(这显然不是问题)。
我需要这张照片能变大。我目前正在使用jQuery解决方案，但它出现了故障。因为我不想调试，我觉得应该有某种CSS解决方案，我在问。
有人知道我是怎么做到的吗？
浏览 4提问于2009-06-25得票数 3
回答已采纳
2回答
容器图片右侧文字(多张图片)
、、、、
我正在制作一个包含3个图像和3个“文本位”的容器
我的问题是，我似乎不能让文本出现在每个图像的右侧。这里是一个SS：
html：
<div class="textandimg">
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
浏览 5提问于2013-11-17得票数 0
1回答
我试图将CSS样式应用到聚合物元素的本地DOM中。具体来说，我只想将样式应用于本地DOM的<content></content>部分。我尝试了以下元素定义：
<dom-module id="test-element">
<template>
<style>
:host > ::content { font-weight: bold; }
</style>
<div>Local DOM 1</div>
<content>
浏览 3提问于2015-11-28得票数 1
回答已采纳
4回答
我有这样的设计：
目前，所有的东西都被包裹在这个黑色背景的矩形中。图片，每个文本字符串都在它自己的类中。文本在span中，末尾有换行。
我的问题是，我希望三个文本字符串显示在图片的右侧，如下所示：
我敢打赌这是很简单的事情，但由于某种原因，我想不出一个解决方案。
这里没有太多的标记可谈，但无论如何我都会粘贴它。
<div class="wrapper">
<div class="pic"><img src="img.png" width="164" height="
浏览 0提问于2012-08-05得票数 0
回答已采纳
我希望文本看起来像这样： ? 我的代码是 .number {
font-size: 32px;
display: inline;
}
.top {
display: inline;
} <div class="top">
<p class="number" id="num">12</p>
<p style="display: inline;" id="month">Oct</p>
<p style="d
浏览 16提问于2021-10-12得票数 0
回答已采纳
3回答
我在JavaScript中遇到了一点小问题。我在做一个画廊页面。有一个带有"Onclik“的图标，它调用函数"comment”。
function comment() {
var div = document.getElementById("commentdiv");
var input = document.createElement("textarea");
var btn = document.createElement("BUTTON");
var t = document.createTextNode("ADD
浏览 2提问于2016-10-08得票数 0
我正在创建一个网站，在那里用户提交文本字段条目，并将其公开显示。我有提交条目的Javascript和post到我们的服务器上的文件准备好了。但是，如何使用javascript "get“方法获取帖子并在DOM中显示它们呢？为了清楚起见，我从一个asp文件中获取文本和图片条目，并在DOM中显示其中的10个(HTML中的空div)。
浏览 3提问于2012-06-29得票数 0
1回答
我的团队正在开发一款web应用程序。我有一个index.html文件，左侧是导航菜单脚手架，右侧是content div。我打算将其他本地html文件(与索引位于同一文件夹中)中的内容加载到索引中的content div中。导航菜单包含将指定内容加载到索引中的各种按钮。(例如用户单击profile account，因此profile account页面将加载到索引中的content div中。)
我的问题是，将本地html文件中的内容加载到索引中的最佳方法是什么？
谢谢。
浏览 1提问于2015-08-31得票数 0
我有这段代码，wordpress主题使用它在页脚显示图片和链接，但我不知道如何实际添加内容。它应该看起来像这个带有"envato，squarespace等“的页脚：
有人能告诉我如何添加页脚项吗？
非常感谢，因为我不知道该怎么做了！
<!-- sponsor logos -->
<section class="box-section sponsors">
<div class="container-fluid">
<div class="row"&
浏览 0提问于2015-03-19得票数 0
我对一个表单有一些html代码，它有4个输入，然后是一个使用引导程序的文本区域。
我希望它在两个div的右边有am图像，而不移动其中一个，我希望它看起来像附加的图像，任何示例都会受到极大的赞赏。
下面的图片代码:第一个是我想要的，第二个是我得到的。
<body>
<div class="col_1">
<h1></h1>
</div>
<div class="container">
<div class=
浏览 2提问于2015-04-04得票数 1
回答已采纳
1回答
我有一个Wordpress页面，其中我的图片显示在左边，我的文本显示在右边。当页面加载到移动屏幕上时，图像会掉到文本下面。我有一个PHP代码来实现所有这些，基本上它会切换图像和文本位置，以及每个位置的左或右属性。
但由于这是适当的，我有困难添加图片的标题。当我想在我的Wordpress管理中添加图片的标题时，标题不在图片下面，而是出现在我的文本文章中(所以，在页面的右边)。我想我的PHP代码会自动地将这个地方的每一个文本都放在这里。
我需要图片的标题在我的图片下面，我想这与PHP代码有很大关系，你可以在下面看到。但我不知道该怎么解决。
这里是我的PHP:
<?php if (have
浏览 5提问于2017-09-11得票数 0
2回答
我需要做一个动态的jQuery菜单来展示产品。
将会有一个带有文本和超链接的主图片，占屏幕的60%，在它的右边，我需要三个小图片(一个在另一个上面，水平方向)，屏幕宽度为20% (但所有这些图片的高度与主图片相同)。
我需要动画片的帮助。动画将是下一个:右边的三张图片向上滑动，最上面的消失，底部追加一张新的(同时最上面的消失)。现在，消失的成为主要的。
我已经用.slideUp函数做了一个简单的解决方案，但这实际上并没有使div上升，相反，它只是失去了它的高度，直到它变得不可见。这不是我想要的解决方案。
谢谢。
编辑：
我已经设法用jQuery.sliedUp函数得到了一些解决方案，但是我仍然
浏览 2提问于2012-07-30得票数 2
1回答
我怎样才能调整我的移动布局。
例如:我的布局以替代模式显示信息，一边是图片，另一边是文本。像这样
图文
文本-图片
图文
文本-图片
，但目前它显示的是移动布局，如下所示：
文本
图片
图片
文本
短信..。
我想在手机上显示为： :
图片
文本
图片
短信..。
解决这个问题的：我用jquery编写它，下面是我的代码：
jQuery(document).ready(function($) {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera //Mini /i.test(navigator.userAgent)
浏览 4提问于2015-09-16得票数 0
2回答
我试图在没有明确了解图片宽度的情况下，在图片下方放置标题。我希望标题扩展到整个图像宽度，但不是延伸父元素的witdh，而是换行。
我希望避免使用javascript (读取宽度并将宽度应用于元素)或使用max-width:123px，因为可能的宽度范围很大。
代码目前看起来像这样，但可以自由更改。图像宽度未知，但限制为最大尺寸。
<div style="float:right; width:auto;">
<img src="http://" \>
<div style="clear:right; min-wid
浏览 4提问于2010-02-21得票数 1
回答已采纳
2回答
我有以下HTML和CSS：
#page {
background-color: #000;
color: #fff;
height: 360px;
width: 360px;
min-height: 100%;
}
#viewport {
font-size: 20pt;
text-align: center;
}
.taskTitle {
height: 13%;
font-weight: bold;
font-size: 30pt;
white-space: nowrap;
display: inline-block;
}
.tas
浏览 4提问于2017-01-06得票数 0
2回答
重置标签的值
、、、、
我有下面的标签，标签里面是一个包含文本的div。我希望当用户点击图片中所示的删除按钮时，
该文本将重新短语到第二张图片上所显示的内容。
以下是标签的代码：
<label id="uploadedInfo"><div id="result">Item to be uploaded</div></label> <button type="reset" class="btn btn-danger" id="deleteUpload"> Delet
浏览 0提问于2015-01-27得票数 0
回答已采纳
有没有可能把一个90度翻转的div水平地放在法线旁边？
在我的示例中，我希望蓝色的div (“一些文本”)是垂直的，并且紧挨着水平的"bottom-right“div。有没有可能在响应的同时这样做呢？我不希望只翻转文本，我希望我放在div中的任何项目也被翻转。
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.big-div{
width:600px;
height:600px;
background:gray;
}
.top{
float:right;
height:30%;
backgrou
浏览 0提问于2017-07-28得票数 3
我正在从整个网站中取出表格，并将它们切换到CSS Div。
下面是我尝试的第一个链接：
问题是右边的内容被放在左边的图片下面，而不是放在图片的右边。
我在我的CSS文件中创建了这个:一个容器，行，以及表格单元格的左、右和中间。我不能在这里粘贴它，因为文本框不允许格式化代码。
<div id="row">
<div id="left">
<h4><img src="picts/torello-safety-design.jpg" width="400" height=
浏览 0提问于2013-09-04得票数 1
2回答
如何在文本框内移动用户输入？
、、、、
我试图将用户输入进一步向右移动，因为边框会截取文本，使其看起来不整洁。我试图让它在文本之前有一个空格，但我不能让它工作。因此，如果有人知道如何解决这个问题，我将非常感激。图片如下：
完整代码：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Welcome!
</title>
浏览 15提问于2020-11-17得票数 3
回答已采纳
2回答
我有一个容器，它有一些文本漂浮在右边，另一些文本我希望相对于整个容器水平居中。下面的代码仅将文本相对于浮动文本的左侧空格居中。容器的宽度可能会根据屏幕大小而变化，居中文本和右侧文本都是动态的，可以包含更多或更少的字符。
#holder {
margin:15px;
padding:15px;
background-color:#000;
color:#fff;
}
#right_text {
float:right;
}
#center_text {
text-align:center;
}
<div id="holder"
浏览 1提问于2013-02-28得票数 1
3回答
我在左边有一张图片，我想把文字排列到图片的顶部。
下面的代码是 jsfiddle中的：
<div>
<img src... >
<span>hello hello hello hello hello hello...</span>
</div>
但它沿着图像底部对齐文本，如下所示：
如何将文本从顶部绕到图像周围？
浏览 6提问于2017-10-06得票数 0
回答已采纳
我想搜索文本“瑞士人”是否存在，如果是，那么我想捕捉“罗杰”的价值，这是反对它。
<TABLE ALIGN=LEFT VALIGN="TOP"><TR><TD ><DIV CLASS=MONOSIZE3><NOBR><FONT COLOR="BLUE"> Name Place
浏览 3提问于2017-08-01得票数 0
我有这个html：
<div class="portlet-header">
Company Information ... <button> some button here </button>
</div>
<div class="portlet-content">
<div class="content_regular">
<table style=" width:100%; height:100%;">
浏览 0提问于2010-06-21得票数 3
回答已采纳
2回答
动态事件处理程序
、、
我希望每个“按钮”类都有一个动态事件处理程序。处理程序必须在单击时显示“邻居”列的内容。我正在考虑用类标记内容，例如“图片-内容”、“视频内容”，当循环所有按钮类时，第一个“图片内容”或“视频内容”类将成为点击显示的目标。或者有没有更好的..。更顺畅的解决方案？
<div class="row">
<div class="col-md-7" >
<div class="col-md-11 col-md-offset-1" >
<div class="
浏览 2提问于2013-10-07得票数 0
回答已采纳
好的，所以我发现<input>标记中的文本仍然被切断，尽管<input>标记已经有了一个填充。当您将字体样式设置为任何草书时，您会更注意到这一点。
看一看这张图片：
屏幕截图中的第一个文本框是type=text的输入，第二个文本框只是一个div。输入文本框切断字符'j‘的尾部，而div文本框没有。
HTML：
<input type="text" value="juvenescent" />
<div>juvenescent</div>
CSS：
input, div {
font-f
浏览 4提问于2016-07-01得票数 19
回答已采纳
我试图将带有棕色背景颜色的文本放在图片上，但它总是显示在图片下面。我将图片和文本都放在同一个div中，但仍然什么都没有
<section class="part-a">
<div class="container">
<img src="pizza.jpg" width="1550" height="1000" alt="pizza">
<div class="container-text">
浏览 0提问于2019-01-31得票数 0
1回答
我有一张图片是背景图片，它拉长了整个页面
它也有一个菜单栏，它在里面(没有文本)
我有四个文本图像文件(about、home等)
我想把它们放在背景图像的上面
但当我这样做时，如果我不是全屏显示，它们会调整菜单栏的大小
这是我到目前为止所拥有的，如果有更简单的方法，请告诉我
<html>
<style>
body
{
background: url("http://imageshack.us/a/img84/4772/backgroundnomenutext.png")
浏览 1提问于2012-12-04得票数 0
1回答
今天一切都很好。
告诉我如何在bootstrap中映射这样的东西：
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<img src="http://my.ln-family.com/i
浏览 2提问于2017-04-05得票数 0
我正在使用Angular 4，Bootstrap 4，并试图实现一个固定的可滚动的右div和一个固定的左div。它应该非常类似于所拥有的。
Bootstrap在版本4中删除了附加的jQuery插件，所以这个方法不再有效，他们建议使用position: sticky，但我不能让它工作。
请帮帮我！
index.html
<div class="container-fluid">
<div class="row h-100">
<div class="col-md-6">
<div i
浏览 3提问于2017-05-20得票数 9
回答已采纳
1回答
我希望从文本的当前位置偏移文本，因此从左侧开始的边距为20像素。我试着将“来自学生”后面的所有内容放在一个表格中，如下所示:这只是完全删除了所有的文本。
在本质上，我有一个大约200px宽，1000px高的瘦图像。我需要这个文本缩进约20像素，所以它看起来不那么马虎。有什么想法吗？
如果我遗漏了任何标准，请告诉我。
<div class="right" style="background-image: url(/images/gala_r3_c2.jpg); height: 1000px; width: 225px; position: relative; &#
浏览 0提问于2013-06-13得票数 2
回答已采纳
1回答
我有一个4英寸屏幕大小的背景图像。当显示在3.5英寸的屏幕上时，图像的顶部和底部不会显示。但是，我有其他视图，屏幕上的文本框也应该与背景图像对齐，但它们没有对齐。
以下是我的应用程序的一些图片：
3.5英寸屏幕：
4“屏幕：
如您所见，文本框比图像稍微向下移动。这是自动调整大小设置的屏幕截图：
这对于背景图像和文本框都是一样的。我不知道如何让应用程序将文本框向下移动指定的量，或者该怎么办？
如果您需要更多信息，请联系我们。
浏览 0提问于2013-12-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
