- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想把图片放在绿色容器下面(和根据绿色容器的宽度水平对齐)。我怎样才能做到这一点?非常感谢,
参见 http://jsfiddle.net/29cz81du/
HTML:
<div id="carte-des-soins">
<ul>
<li><span class="menu-items"><a href="#" data-region="soins-1">Visage</a></span>
</li>
<li><span class="menu-items"><a href="#" data-region="soins-2">Epilation</a></span>
</li>
<li><span class="menu-items"><a href="#" data-region="soins-3">Mains</a></span>
</li>
<li><span class="menu-items"><a href="#" data-region="soins-4">Pieds</a></span>
</li>
<li><span class="menu-items"><a href="#" data-region="soins-5">Corps</a></span>
</li>
</ul>
</div>
<div id="container-des-soins">
<div id="soins-1" class="textzone">
<div class="desc-box clearfix">
<p class="desc-box-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img class="type-de-soins" src="http://lorempixel.com/output/city-q-g-267-204-7.jpg">
</div>
<div class="carte clearfix">
<div class="desc-soins">
<p><strong>PHYT'S : soin visage Equilibre </strong>
<br>60 min. </p>
<p>Type de peaux : toute peau à équilibrer (grasse, mixte ou sèche). Soin du visage traditionnel, personnalisé selon le type de peau, qui vous fera retrouver une peau saine et un teint éclatant. </p>
<p><strong>PHYT'S : soin visage Pureté active</strong>
<br>60 min. </p>
<p>Type de peaux : peaux grasses ou mixtes comédogènes. Soin spécifique visant à assainir le teint, éliminer les comédons et aider à réguler les excès de sébum. Ce soin s’effectue, de préférence par cure de 4 soins avec l’application au préalable
d’une crème spécifique pendant quelques jours. </p>
<p><strong>PHYT'S : soin visage Aqua Phyt's
</strong>
<br>75 min. </p>
<p>Soin très hydratant à l'Acide Hyaluronique d'origine végétale </p>
<p><strong>PHYT'S : soin visage Capyl
</strong>
<br>60 min. </p>
<p>Type de peaux : peaux sèches à rougeurs diffuses, sensibles, fines. Soin calmant et décongestionnant, spécialement conçu pour les peaux sensibles ou à rougeurs diffuses. </p>
</div>
</div>
</div>
CSS:
/* CARTE DES SOINS */
#carte-des-soins {
text-align: center;
margin-top: 40px;
}
#carte-des-soins ul {
list-style: none;
padding:0;
}
#carte-des-soins li {
display: inline-block;
margin: 0 10px;
background: red;
}
#carte-des-soins li a {
color: #fff;
text-decoration:none;
text-align:center;
padding: 20px;
background: #474032;
transition: background-color 0.5s ease;
}
#container-des-soins {
margin-right: auto;
margin-left: auto;
width: 90%;
}
#soins-1,
#soins-2,
#soins-3,
#soins-4,
#soins-5 {
position: relative;
float: left;
margin-top: 30px;
margin-bottom: 30px;
padding: 5px 20px 20px 20px;
color: #333;
font-weight: 400;
line-height: 1px;
}
#soins-2,
#soins-3,
#soins-4,
#soins-5 {
display: none;
}
#soins-2 p {
margin-bottom: 5px;
}
#soins-1 p {
margin-bottom: 5px;
padding-right: 10px;
}
#soins-1 a {
color: #3A7CDB;
text-decoration: none;
}
#soins-1 a:hover {
text-decoration: underline;
}
.carte p {
margin-bottom: 1em;
}
.carte {
float: right;
width: 55%;
background-color: red;
padding-top: 25px;
}
.desc-box {
position: relative;
z-index: 1;
width: 40%;
float: left;
background-color: green;
}
.desc-box-text {
float: left;
padding-top: 25px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
font-weight: 400;
line-height: 1.38;
color: rgb(0, 0, 0);
}
.desc-soins {
float: left;
font-weight: 400;
line-height: 1.38;
color: rgb(0, 0, 0);
}
.type-de-soins {
display: block;
position: relative;
margin: 0 auto;
z-index: 4;
width: 179px;
height: auto;
overflow: hidden;
}
.desc-soins strong {
font-style: normal;
font-weight: 700;
}
/* END CARTE DES SOINS */
最佳答案
如果您将绿框 HTML 从此更改:
<div class="desc-box clearfix">
<p class="desc-box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img class="type-de-soins" src="http://lorempixel.com/output/city-q-g-267-204-7.jpg">
</div>
为此
<div class="desc-box clearfix">
<div class="green">
<p class="desc-box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img class="type-de-soins" src="http://lorempixel.com/output/city-q-g-267-204-7.jpg">
</div>
<img class="type-de-soins" src="http://lorempixel.com/output/city-q-g-267-204-7.jpg" style="width:204px;display:block;margin:0 auto;">
</div>
您需要将列中的内容换行,以便绿色围绕所需区域。我内联图像的样式以使用宽度、 block 、边距作为居中的自动设置。
然后,将 .desc-box
的 CSS 修改为这样,假设我理解正确,您将获得所需的结果。
.desc-box {
position: relative;
z-index: 1;
width: 40%;
float: left;
}
.desc-box>.green {
background-color: green;
}
可以看到here
关于html - 在DIV下面放一张图片,根据DIV的宽度水平对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26961706/
这个问题在这里已经有了答案: Difference between Property and Field in C# 3.0+ (10 个答案) 关闭 10 年前。 我不明白静态属性之间的区别: p
当元素被拖放时,有没有办法从被拖动的元素中获取 id(或其他属性值)? 例如,在左侧,我有一堆 div,我可以将图像放入其中。右边有一个 div 用来保存图像。当我将图像从右侧拖动到左侧的 div 时
每当我更改其中一个类属性时,我想设置一个修改标志,如下所示 public bool Modified { get; set; } public bool Enabled { get; set { Mo
由于某种原因,我下面的代码曾经可以正常工作,但现在却引发了一个异常: public static async Task HttpPut(string inUrl, string inFilePath)
为什么将 ; 放在最佳实践中?在函数定义的末尾。 例如 var tony = function () { console.log("hello there"); }; 优于: var tony
我在容器内有一个位图。当我拖动容器时,光标变为编辑文本形状,图像也跳到光标的右下角(好像我从左上角拿着图像并拖动它)。 这是我的代码,所以你可以看到我有 RTFM: function createIc
这个问题已经有答案了: C# 3.0 auto-properties — useful or not? [closed] (17 个回答) 已关闭 6 年前。 当我让 Visual Studio 20
以类中的以下代码为例: public class Employee : IEntity { public string FirstName { get; set; } public s
我有 json 数据: { "products": [ { "productId" : 0, "productImg" : "../img/product-ph
这个问题在这里已经有了答案: What is the difference between a field and a property? (33 个答案) 关闭 9 年前。 我在一本书上找到这样声
我正在设置多个方法,想知道如何继续将一个变量(“顶部”变量)传递给不同的方法。 主要方法: public static void Main(string[] args) { i
我正在尝试使用 crontab 编写一个简单的任务,将一些文件从本地复制到 HDFS。我的代码是这样的: #!/bing/ksh ANIO=$(date +"%Y") MES=$(date +"%m"
有人可以告诉我如何使用这个解决方案来解决我的问题吗?我也想限制 id 中包含文本“not”的节点的拖/放。 jsTree drag and drop restrict folders by class
我的情况如下 - 我正在对可能包含链接行的表进行排序: row 1 row 2 row 3 row 4 row 5 我需要的是禁止在.linked-to-p
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表,我希望用户能够通过拖放对列表进行重新排序。此外,我希望有第二个列表,用户可以将第一个列表中的项目拖到其中。 到
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表,我希望用户能够通过拖放对列表进行重新排序。此外,我希望有第二个列表,用户可以将第一个列表中的项目拖到其中。 到
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true,但是当我拖动弹出面板并将其放到新位置时,它
所以,基于this answer ,我有一组可以拖放并卡入到位的 div。唯一的问题是,可拖动的 div 具有不同的高度,我需要它们始终捕捉到目标的底部,而不是顶部。 您可以在this JsFiddl
我是一名优秀的程序员,十分优秀!