響應頁面絕對/相對定位

* { 
 
    box-sizing: border-box; 
 
} 
 
h1 { 
 
    text-align: center; 
 
    margin-bottom: 20px; 
 
} 
 
div { 
 
    width: 100%; 
 
} 
 
p { 
 
    width: 90%; 
 
    height: 200%; 
 
    margin: 20px; 
 
    color: black; 
 
    padding: 10px; 
 
} 
 
@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; 
 
    position: relative; 
 
    border: 1px solid black; 
 
    margin: auto; 
 
    } 
 
    .col-lg-1 { 
 
    width: 8.33%; 
 
    } 
 
    .col-lg-2 { 
 
    width: 16.66%; 
 
    } 
 
    .col-lg-3 { 
 
    width: 25%; 
 
    } 
 
    .col-lg-4 { 
 
    width: 33.33%; 
 
    } 
 
    .col-lg-5 { 
 
    width: 41.66%; 
 
    } 
 
    .col-lg-6 { 
 
    width: 50%; 
 
    } 
 
    .col-lg-7 { 
 
    width: 58.33%; 
 
    } 
 
    .col-lg-8 { 
 
    width: 66.66%; 
 
    } 
 
    .col-lg-9 { 
 
    width: 74.99%; 
 
    } 
 
    .col-lg-10 { 
 
    width: 83.33%; 
 
    } 
 
    .col-lg-11 { 
 
    width: 91.66%; 
 
    } 
 
    .col-lg-12 { 
 
    width: 100%; 
 
    } 
 
} 
 
#heading { 
 
    position: absolute; 
 
    left: 358px; 
 
    top: 0; 
 
    background-color: #A52A2A; 
 
    width: 20.2%; 
 
    height: 12.2%; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
} 
 
</style>

<h1>Our Menu</h1> 
 

 
<div class="row"> 
 
    <div class="col-lg-4"> 
 
    <section id="heading">Heading</section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p> 
 
    </div> 
 

 
</div>

我想創建一個響應webpapge：

我有3個div的，我需要他們每個人都在右上角標題角。我想要做的是當我將瀏覽器的寬度從992px增加到全屏時，div的大小和位置應該隨其標題一起相應地改變。

我也需要差距之間的divs，我已經使用相對和絕對定位，但似乎並沒有工作。

使用我的代碼，當我改變瀏覽器寬度時，標題不會調整大小，加上它也會跳出div（請參閱圖片）。請幫忙！

P.s我爲了檢查目的只在第一個div上添加了標題。

來源

2016-11-20 Maryam Masood

我的建議：https://jsfiddle.net/banzay52/s4yf1awb/ – Banzay

你必須設置父DIV位置相對position:relative，因爲有絕對位置的元素總是法洛斯具有相對位置的第一個父

see your example here

來源

2016-11-20 12:15:39 Chiller

好吧，幾點這裏你頭：

這是一個頭，所以使用<h1, h2, h3...>標籤。
如果它具有絕對位置，並且從左側開始說它是358px，那麼它將位於距離左側358px的位置，所以這就是爲什麼離開div的原因。要把標題放在右邊，我會用float: right來代替。
當然，添加浮動到標題，你必須添加浮動到下面的文本。
如果您使用的20％的寬度，也不會occupe總（如果你想報頭，以適應整個父的寬度，你必須使用100％。
使用媒體查詢與@media (min-width: 992px)，使這些變化你更大的分辨率說。

建議的解決方案 內部媒體查詢，你只需要越過你要改變這些元素（在你的情況，只是寬度）。我們要改變的是，當屏幕大於992px時，標題的寬度爲100％如此：以下是一般CSS規則：

#heading { 
      background-color: #A52A2A; 
      border: 1px solid black; 
      float: right; 
      height: 12.2%; 
      position: relative; 
      text-align: center; 
      width: 20%; 
     }

在這裏，我們有一個especific規則...

@media (min-width: 992px) { 
    #heading { 
    width: 100%; 
    } 
}

想象一下，你還想改變background-color，所有你需要做的是對財產的媒體查詢添加規則內....

來源

2016-11-20 12:07:10 Anfuca

這工作！謝謝！但我想問一些問題，爲什麼我們要把標題樣式放在媒體查詢中？什麼是「float：right」呢？我是初學者，無法理解浮動元素。 –

好吧我更新我的答案... 浮點屬性指定是否應該浮動框（一個元素）。 http://www.w3schools.com/cssref/pr_class_float.asp – Anfuca

您不需要爲標題使用位置。你可以使用float。還有一件事你讓ID標題上課。 Coz ID僅用於唯一標識符。所以做一個班。檢查你的css部分關於我用於差距的媒體查詢。col-lg-4 {寬度：32.33％;保證金：5px的; } 只是你的問題的即時答案。謝謝，任何問題在評論中問我。

* { 
 
    box-sizing: border-box; 
 
} 
 

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

 

 

 
p { 
 
    width: 90%; 
 

 
    margin: 20px; 
 
    color: black; 
 
    padding: 10px; 
 
} 
 

 
@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; 
 
    
 
    border: 1px solid black; 
 
    
 
    } 
 
    .col-lg-1 { 
 
    width: 8.33%; 
 
    } 
 
    .col-lg-2 { 
 
    width: 16.66%; 
 
    } 
 
    .col-lg-3 { 
 
    width: 25%; 
 
    } 
 
    .col-lg-4 { 
 
    width: 32.33%; 
 
    margin:5px; 
 
    } 
 
    .col-lg-5 { 
 
    width: 41.66%; 
 
    } 
 
    .col-lg-6 { 
 
    width: 50%; 
 
    } 
 
    .col-lg-7 { 
 
    width: 58.33%; 
 
    } 
 
    .col-lg-8 { 
 
    width: 66.66%; 
 
    } 
 
    .col-lg-9 { 
 
    width: 74.99%; 
 
    } 
 
    .col-lg-10 { 
 
    width: 83.33%; 
 
    } 
 
    .col-lg-11 { 
 
    width: 91.66%; 
 
    } 
 
    .col-lg-12 { 
 
    width: 100%; 
 
    } 
 
} 
 

 
.heading { 
 
    float:right; 
 
    background-color: #A52A2A; 
 
    width: 20.2%; 
 
    height: 12.2%; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
}

<h1>Our Menu</h1> 
 

 
<div class="row"> 
 
    <div class="col-lg-4"> 
 
    <section class="heading">Heading</section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
    <section class="heading">Heading</section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
    <section class="heading">Heading</section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p> 
 
    </div> 
 

 
</div>

來源

2016-11-20 12:16:27

感謝您的建議，我的確在想同樣的事情，我必須爲每個標題分配一個唯一的ID！ –

@MariumMasood不客氣。 :) –

響應頁面絕對/相對定位

回答

相關問題