Question

我必须将一个盒子（div）放在另一个盒子里（鸡肉，牛肉，寿司），该盒子的位置应该在右上角。如果我改变屏幕的大小（即收缩浏览器窗口）或测试它是否为较小的设备，我就会陷入困境。有人可以帮我解决这个问题吗？

这是代码的链接：https://jsfiddle.net/nupursd/uzvfsbmc/

CSS

body{
    align-content: center;
}
* {
  box-sizing: border-box;
}

h1 {
text-align: center;
  margin-bottom: 15px;
}
div{
    position: relative;
}
p {

  border: 3px solid black;
  background-color: #D3D3D3;
  width: 90%;
  height: 175px;
  font-family: "Arial", Helvetica, sans-serif;
  color: black;
  text-align: justify;
  padding-left:10px;
  padding-bottom:10px;
  padding-right:10px;
  font-size: medium;
  overflow: auto;
}
#Dish1{
    position: absolute;
    top:15px;
    left:385px;
    width:70px;
    height:20px;
    border: 2px solid black;
    background-color: white;
    text-align: center;
}
#Dish2{
    position: absolute;
    top:15px;
    left:385px;
    width:70px;
    height:20px;
    border: 2px solid black;
    background-color: white;
    text-align: center;
}
#Dish3{
    position: absolute;
    top:15px;
    left:385px;
    width:70px;
    height:20px;
    border: 2px solid black;
    background-color: white;
    text-align: center;
}


.row {
  width: 100%;
}
/********** Large devices only **********/
@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;

  }

  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-6 {
    width: 50%;
  }

  .col-lg-12 {
    width: 100%;
  }
}
/********** Medium devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;

  }

  .col-md-4 {
    width: 33.33%;
  }
  .col-md-6 {
    width: 50%;
  }

  .col-md-12 {
    width: 100%;
  }
}

/********** Small devices only **********/
@media (max-width: 767px){
 .col-md-12 {
    float: left;

  }

  .col-md-12 {
    width: 100%;
  }
 }

HTML

<!DOCTYPE html>

<title>Thai Restaurant Menu</title>
<link rel="stylesheet" href="module2Style.css">

<body>
<h1>Thai Restaurant Menu </h1>

<div class="row">
    <div class="col-lg-4 col-md-6 col-md-12">
        <p id="p1" >
            <br><br>This delicious Thai chicken dinner makes for an exotic weeknight dinner that comes together quickly. 
                    It features traditional Thai flavors like fish sauce, Sriracha, fresh ginger, coconut milk, and cilantro. Use less hot sauce for milder flavor. 
                    A squeeze of fresh lime juice before serving is the crowning touch.
        </p>
         <div id="Dish1" class="class1">Chicken</div>
    </div> 

    <div class="col-lg-4 col-md-6 col-md-12">
        <p id="p2">
            <br><br>This exotic, sophisticated, delicious perfection in a crisp lettuce wrap is dipped in a spicy peanut sauce forming a culinary kaleidoscope of 
                    flavors that literally sparkle on the taste buds. And the only cooking required is for the rice.
        </p>
        <div id="Dish2">Sushi</div>
    </div>

    <div class="col-lg-4 col-md-12">
        <p id="p3">
            <br><br>A delicious marinade for flank steak blending the flavors of crushed coriander seed, lime juice, and soy sauce. This marinade can be used well with other meats as well. Serve over rice or shredded Chinese cabbage and red pepper slices.
        </p>
        <div id="Dish3">Beef</div>
    </div>

</div>

</body>

Answer 1

使用right代替left代替绝对定位的标签。

Answer 2

使用左边和宽度的百分比，按百分比按比例定位

top:15px;
left:80%;
width:10%;

CSS：

/********** Base styles **********/

body {
  align-content: center;
}

* {
  box-sizing: border-box;
}

h1 {
  text-align: center;
  margin-bottom: 15px;
}

div {
  position: relative;
}

p {
  border: 3px solid black;
  background-color: #D3D3D3;
  width: 90%;
  height: 175px;
  font-family: "Arial", Helvetica, sans-serif;
  color: black;
  text-align: justify;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  font-size: medium;
  overflow: auto;
}

#Dish1 {
  position: absolute;
  top: 15px;
  left: 80%;
  width: 10%;
  height: 20px;
  border: 2px solid black;
  background-color: white;
  text-align: center;
}

#Dish2 {
  position: absolute;
  top: 15px;
  left: 80%;
  width: 10%;
  height: 20px;
  border: 2px solid black;
  background-color: white;
  text-align: center;
}

#Dish3 {
  position: absolute;
  top: 15px;
  left: 80%;
  width: 10%;
  height: 20px;
  border: 2px solid black;
  background-color: white;
  text-align: center;
}

.row {
  width: 100%;
}


/********** Large devices only **********/

@media (min-width: 992px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    float: left;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-12 {
    width: 100%;
  }
}


/********** Medium devices only **********/

@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    float: left;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-12 {
    width: 100%;
  }
}


/********** Small devices only **********/

@media (max-width: 767px) {
  .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
}

Codepen - http://codepen.io/nagasai/pen/LkrgqR

Answer 3

如果您愿意改变HTML结构，那么这将更容易实现。

定位的工作方式是 - 绝对元素将相对于具有position: relative;的最近父母的原始位置定位

所以，我的想法是创建一个部分并在部分内使用一个header元素。我认为这可能对您自己和便携性更具可读性。这样，您就不会在不同的CSS id之间复制信息。相反，我利用类来使CSS更加模糊，允许它处理多个元素。

<div class="col-lg-4 col-md-6 col-md-12">
    <section class="category">
        <h2>Some header</h2>
        ...CONTENT...
    </section>
</div>

CSS

.category {
    position: relative;
}
.category h2 {
    position: absolute;
    top: 0;
    right: 0;
}

＆＃13;

/********** Base styles **********/
body{
	align-content: center;
}
* {
  box-sizing: border-box;
}

h1 {
text-align: center;
  margin-bottom: 15px;
}
div{
	position: relative;
}
section {

  border: 3px solid black;
  background-color: #D3D3D3;
  width: 90%;
  font-family: "Arial", Helvetica, sans-serif;
  color: black;
  text-align: justify;
  padding-left:10px;
  padding-bottom:10px;
  padding-right:10px;
  font-size: medium;
  overflow: auto;
  position: relative;
  margin: 10px;
}
.category h2{
	position: absolute;
	top:-12px;
	right:0px;
	border: 2px solid black;
	background-color: white;
	text-align: center;
  font-size: 1em;
  padding: 5px;
}
#Dish2{
	position: absolute;
	top:15px;
	left:385px;
	width:70px;
	height:20px;
	border: 2px solid black;
	background-color: white;
	text-align: center;
}
#Dish3{
	position: absolute;
	top:15px;
	left:385px;
	width:70px;
	height:20px;
	border: 2px solid black;
	background-color: white;
	text-align: center;
}


.row {
  width: 100%;
}
/********** Large devices only **********/
@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
    
  }
  
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-6 {
    width: 50%;
  }
  
  .col-lg-12 {
    width: 100%;
  }
}
/********** Medium devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
    
  }
  
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-6 {
    width: 50%;
  }
  
  .col-md-12 {
    width: 100%;
  }
}

/********** Small devices only **********/
@media (max-width: 767px){
 .col-md-12 {
    float: left;
    
  }
 
  .col-md-12 {
    width: 100%;
  }
 }

＆＃13;

<h1>Thai Restaurant Menu </h1>

<div class="row">
	<div class="col-lg-4 col-md-6 col-md-12">
    <section class="category">
      <h2>Chicken</h2>
			<br><br>This delicious Thai chicken dinner makes for an exotic weeknight dinner that comes together quickly. 
					It features traditional Thai flavors like fish sauce, Sriracha, fresh ginger, coconut milk, and cilantro. Use less hot sauce for milder flavor. 
					A squeeze of fresh lime juice before serving is the crowning touch.</section>
	</div> 
	
	<div class="col-lg-4 col-md-6 col-md-12">
		<section class="category">
      <h2>Sushi</h2>
			<br><br>This exotic, sophisticated, delicious perfection in a crisp lettuce wrap is dipped in a spicy peanut sauce forming a culinary kaleidoscope of 
					flavors that literally sparkle on the taste buds. And the only cooking required is for the rice.
		</section>
	</div>
	
	<div class="col-lg-4 col-md-12">
		<section class="category">
      <h2>Beef</h2>
			<br><br>A delicious marinade for flank steak blending the flavors of crushed coriander seed, lime juice, and soy sauce. This marinade can be used well with other meats as well. Serve over rice or shredded Chinese cabbage and red pepper slices.
		</section>
	</div>
	
</div>

＆＃13;

现在，您可以使用所有代码和上面的结构 - https://jsfiddle.net/adjit/uzvfsbmc/3/

section {
  border: 3px solid black;
  background-color: #D3D3D3;
  width: 90%;
  font-family: "Arial", Helvetica, sans-serif;
  color: black;
  text-align: justify;
  padding-left:10px;
  padding-bottom:10px;
  padding-right:10px;
  font-size: medium;
  overflow: auto;
  position: relative;
  margin: 10px;
}
.category h2{
    position: absolute;
    top:-12px;
    right:0px;
    border: 2px solid black;
    background-color: white;
    text-align: center;
  font-size: 1em;
  padding: 5px;
}

CSS中的相对和绝对定位

3 个答案: