Question

首先，这里是指向我的CodePen的链接：https://codepen.io/mikaelssol/pen/qrvRKL

正如您在上面的链接中所看到的，我有三个<div id="menu">元素，其中“maroon”作为背景颜色。他们是：

1）<div id="menu">Fish</div> 2）<div id="menu">Chicken</div> 3）<div id="menu">Beef</div>

<div id="menu">元素是使用以下CSS的目标：

div#menu {
width: 150px;
height: 90px;
background: blue;
position: absolute;
top: 0;
right: 0;
}

我还有三个<p>个元素，每个元素都使用以下CSS：

p {
border: 1px solid black;
background-color: #A52A2A;
width: 90%;
height: 150px;
margin-right: auto;
margin-left: auto;
font-family: Helvetica;
color: white;
position: relative;
}

我试图实现的最终结果是让三个<div>元素的蓝色从顶部和右侧定位0px，完全对齐{{1}的右上边框1}}栗色的元素。无论设备屏幕的大小或浏览器窗口的大小如何，两个元素都必须具有相同的位置。所有三个<p>必须在页面中心对齐，其<p>元素与右上边框对齐。

我到目前为止得到的结果是<div>元素与HTML文档而不是<div>元素对齐。我设法处理媒体查询和一切都很好，但这些元素的定位让我很难过。任何帮助都非常有帮助。

Answer 1

我是这样做的:(对不起，如果这与你的引导风格冲突）

https://codepen.io/StefanBobrowski/pen/aJMrrw

<强> HTML

<div class="menu-box-container">
    <div class="menu-box">
        <p>Item 1</p>
        <div class="item-box">Fish</div>
    </div>
    <div class="menu-box">
        <p>Item 2</p>
        <div class="item-box">Chicken</div>
    </div>
    <div class="menu-box">
        <p>Item 3</p>
        <div class="item-box">Beef</div>
    </div>  
</div>

<强> CSS

.menu-box-container {
  display: flex;
}

.menu-box {
    width: 170px;
    height: 110px;
    padding: 20px;
    position: relative;
    border: 1px solid green;
}

.menu-box p {
    width: 100%;
    height: 100%;
    margin: 0;
    color: #fff;
    background-color: maroon;
}

.item-box {
    display: block;
    padding: 20px;
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: blue;
}

我怎样才能管理那些<p>和</p> <div>元素的位置，以便它们显示在我需要的位置？

1 个答案: