我正在尝试将所有按钮设置为固定在<div>
内。我希望按钮与左侧和文本下方的图像对齐。我尝试使用固定的绝对位置,但是随后我必须为每个按钮创建CSS,但发现效率低下。另外,我发现一个按钮的格式很奇怪,尽管它们都具有相同的CSS。或者,当我尝试最小化窗口时,按钮开始不合时宜。.我找不到原因。下面是我的代码:
.secondContainer {
display: flex;
flex-wrap: wrap;
}
ul {
padding: 10px;
}
li {
text-align: left;
}
li.title {
list-style-type: none;
font-size: 15px;
}
li.author {
list-style-type: none;
font-size: 12px;
}
li.isbn {
list-style-type: none;
font-size: 12px;
}
li.price {
list-style-type: none;
font-size: 12px;
font-weight: bold;
}
.flexItem {
display: flex;
align-items: center;
margin-left: 10px;
flex: 1;
}
.flexItem img {
flex-grow: 0;
flex-shrink: 0;
}
.button {
color: white;
padding: 2px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
transition-duration: 0.4s;
cursor: pointer;
}
.buttonCart {
width: 120px;
background-color: white;
color: black;
border: 2px solid #dd1d5e;
}
.buttonCart:hover {
background-color: #dd1d5e;
color: white;
}
.buttonOnline {
width: 120px;
background-color: white;
color: black;
border: 2px solid #dd1d5e;
}
.buttonOnline:hover {
background-color: #dd1d5e;
color: white;
}
<div class="secondContainer">
<div class="flexItem">
<img src="images/books/holiday/thanksgiving_recipes.png" alt="Thanksgiving Recipes" class="image">
<div class="text">
<ul>
<li class="title"> Thanksgiving Recipes </li>
<li class="author"> Hannie P Scott </li>
<li class="isbn"> ISBN123123412 </li>
<li class="price"> $2.92 </li>
</ul>
<button class="button buttonCart">Add to Cart</button>
<button class="button buttonOnline">Read Now</button>
</div>
</div>
<div class="flexItem">
<img src="images/books/holiday/giving_thanks.png" alt="Thanksgiving Recipes" class="image">
<div class="text">
<ul>
<li class="title"> Giving Thanks </li>
<li class="author"> Kathleen Curtin </li>
<li class="isbn"> ISBN123123412 </li>
<li class="price"> $1.45 </li>
</ul>
<button class="button buttonCart">Add to Cart</button>
</div>
</div>
</div>
答案 0 :(得分:1)
只需在div中放置两个按钮并将类添加到div中,在这种情况下,就不需要像这样的绝对位置了:
<div class="marginLeft">
<button> Button 1 </button>
<button> Button 2 </button>
</div>
CSS
.marginLeft {
/* If the div doesn't look right uncomment the next line */
/* display:inline; */
margin-left:10px
}
答案 1 :(得分:1)
将// src/ComponentD.js
import React from 'react';
import ThemeContext from './ThemeContext';
const D = () => (
<ThemeContext.Consumer>
{value => (
<p style={{ color: value }}>
Hello World
</p>
)}
</ThemeContext.Consumer>
);
添加到flex-direction:column;
类,并删除选择器.flexItem
的2个属性
然后将所需的宽度添加到.flexItem img
元素中,如下所示:
img
Codepen在这里玩:
https://codepen.io/larrytherabbit/pen/PozPaMG
如果您想将img {
width:200px; /* for example */
}
容器更改.flexItem
中的所有项目(img,文本,按钮)向左对齐,请改为align-items
,而不是flex-start
。
答案 2 :(得分:1)
您无需麻烦,只需将按钮类移到点的前面即可。并添加到按钮类 margin-left:10px 您会在下面的CSS代码中看到我发表的评论
.secondContainer {
display: flex;
flex-wrap: wrap;
}
ul {
padding: 10px;
}
li {
text-align: left;
}
li.title {
list-style-type: none;
font-size: 15px;
}
li.author {
list-style-type: none;
font-size: 12px;
}
li.isbn {
list-style-type: none;
font-size: 12px;
}
li.price {
list-style-type: none;
font-size: 12px;
font-weight: bold;
}
.flexItem {
display: flex;
align-items: center;
margin-left: 10px;
flex: 1;
}
.flexItem img {
flex-grow: 0;
flex-shrink: 0;
}
//like this
button {
color: white;
padding: 2px;
margin-left : 10px
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
transition-duration: 0.4s;
cursor: pointer;
}
.buttonCart {
width: 120px;
background-color: white;
color: black;
border: 2px solid #dd1d5e;
}
.buttonCart:hover {
background-color: #dd1d5e;
color: white;
}
.buttonOnline {
width: 120px;
background-color: white;
color: black;
border: 2px solid #dd1d5e;
}
.buttonOnline:hover {
background-color: #dd1d5e;
color: white;
}
<div class="secondContainer">
<div class="flexItem">
<img src="images/books/holiday/thanksgiving_recipes.png" alt="Thanksgiving Recipes" class="image">
<div class="text">
<ul>
<li class="title"> Thanksgiving Recipes </li>
<li class="author"> Hannie P Scott </li>
<li class="isbn"> ISBN123123412 </li>
<li class="price"> $2.92 </li>
</ul>
<button class="button buttonCart">Add to Cart</button>
<button class="button buttonOnline">Read Now</button>
</div>
</div>
<div class="flexItem">
<img src="images/books/holiday/giving_thanks.png" alt="Thanksgiving Recipes" class="image">
<div class="text">
<ul>
<li class="title"> Giving Thanks </li>
<li class="author"> Kathleen Curtin </li>
<li class="isbn"> ISBN123123412 </li>
<li class="price"> $1.45 </li>
</ul>
<button class="button buttonCart">Add to Cart</button>
</div>
</div>
</div>
答案 3 :(得分:0)
@sarah,您可以为CSS尝试以下方法:
display: flex;
flex-wrap: wrap;
}
ul {
/*padding: 10px;*/
padding: 0;
}
li {
text-align: left;
}
li.title {
list-style-type: none;
font-size: 15px;
}
li.author {
list-style-type: none;
font-size: 12px;
}
li.isbn {
list-style-type: none;
font-size: 12px;
}
li.price {
list-style-type: none;
font-size: 12px;
font-weight: bold;
}
.flexItem {
display: flex;
align-items: center;
margin-left: 10px;
flex: 1;
}
.flexItem img {
flex-grow: 0;
flex-shrink: 0;
}
.button {
color: white;
padding: 2px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
transition-duration: 0.4s;
cursor: pointer;
margin-bottom:10px;
}
.buttonCart {
width: 120px;
background-color: white;
color: black;
border: 2px solid #dd1d5e;
}
.buttonCart:hover {
background-color: #dd1d5e;
color: white;
}
.buttonOnline {
width: 120px;
background-color: white;
color: black;
border: 2px solid #dd1d5e;
}
.buttonOnline:hover {
background-color: #dd1d5e;
color: white;
}
.text{
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 10px;
}
我刚刚将flex属性添加到您的“文本”类中。现在看来是标准的。
答案 4 :(得分:0)
将右侧包装到伸缩容器中。 (当然不需要背景颜色,宽度和高度。)
.right-side{
width: 300px;
height: 400px;
background:red;
display: flex;
flex-direction: column;
}
.text-wrapper{
background: yellow;
flex: 1 1 auto;
}
.button-wrapper{
flex: 0 0;
}
<div class="right-side">
<div class="text-wrapper">
<ul>
<li class="title"> Thanksgiving Recipes </li>
<li class="author"> Hannie P Scott </li>
<li class="isbn"> ISBN123123412 </li>
<li class="price"> $2.92 </li>
</ul>
</div>
<div class="button-wrapper">
<button class="button buttonCart">Add to Cart</button>
<button class="button buttonOnline">Read Now</button>
</div>
</div>