如何居中一個div並讓另一個div浮動到左邊？

這就是我現在已經和它工作得很好，直到你放大 - https://jsfiddle.net/6mjrjayh/1/如何居中一個div並讓另一個div浮動到左邊？

HTML

<div id="box1"> 
<p><strong>About me</strong></p> 
<img src ="images/hack.jpg"/> 
<p><strong>Image Courtesy Bob Marley</strong><br></br> 
<a href="www.google.com">www.google.com</a></p> 
</div> 

<div id="box2"> 
<p> 
Hi there! 
<br></br> 
I'm bob, a freelance designer and developer<br> 
I'm bob, a freelance designer and developer<br> 
I'm bob, a freelance designer and developer<br> 
I'm bob, a freelance designer and developer<br> 
I'm bob, a freelance designer and developer<br> 
I'm bob, a freelance designer and developer<br> 
I'm bob, a freelance designer and developer<br> 
I'm bob, a freelance designer and developer<br> 
I'm bob, a freelance designer and developer<br> 
<br><br><br> 
</p> 
</div>

CSS

#box1 { 
    float: left; 
    position:absolute; 
    padding-left:50px; 
} 

#box2 { 
    width: 20em; 
    margin: 0 auto 1em auto; 
}

我希望它這樣當u放大/縮小BOX1保持其相對於box2的確切位置，就像現在沒有縮放一樣。對不起，如果我不解釋它的權利，但暴亂的Zeast隊長几乎已經得到了我想要的方式，除了box2改變它的位置，而box1保留它，而我想要它時，我放大/縮小頁面時的另一種方式。

來源

2016-05-02 user3619057

你能提供一個你想要什麼的屏幕截圖。 –

我編輯了我的答案。覈實。 –

想象一下，我的box1和box2只有5px的填充。不管這個分辨率有多大，分辨率都不會改變。而且我希望box2始終處於居中狀態，而box1只是浮動在它的左側。它不是我可以真正截圖的東西，因爲它是一個快速響應的設計問題。 – user3619057

.boxes{ 
 
    width: 90vw; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
    border: 1px solid #ccc; 
 
    display: inline-block; 
 
} 
 
#box1{ 
 
    width: 300px; 
 
    border: 1px solid #ccc; 
 
    margin: 5px; 
 
    float: left; 
 
    margin-left: calc(100vw/4); 
 
} 
 
#box2{ 
 
    float: left; 
 
    border: 1px solid #ccc; 
 
    margin: 5px; 
 
}

<div class="boxes"> 
 
    <div id="box1"> 
 
    <p><strong>About me</strong></p> 
 
    <img src ="images/hack.jpg"/> 
 
    <p><strong>Image Courtesy Bob Marley</strong><br><br> 
 
     <a href="www.google.com">www.google.com</a></p> 
 
    </div> 
 

 
    <div id="box2"> 
 
    <p> 
 
     Hi there! 
 
     <br><br> 
 
     I'm bob, a freelance designer and developer<br> 
 
     I'm bob, a freelance designer and developer<br> 
 
     I'm bob, a freelance designer and developer<br> 
 
     I'm bob, a freelance designer and developer<br> 
 
     I'm bob, a freelance designer and developer<br> 
 
     I'm bob, a freelance designer and developer<br> 
 
     I'm bob, a freelance designer and developer<br> 
 
     I'm bob, a freelance designer and developer<br> 
 
     I'm bob, a freelance designer and developer<br> 
 
     <br><br><br> 
 
    </p> 
 
    </div> 
 
</div>

這裏的工作代碼爲你所需的輸出，但它沒有反應。 Fiddle鏈接

來源

2016-05-02 08:22:13

確定這個項目非常接近，但是當box1保留它時，放大box2會改變它的位置。有沒有辦法做到這一點呢？ – user3619057

另一種方式意味着最好是使用http://getbootstrap.com/getting-started/ –

我剛剛在我的網站上花費了幾個月時間，這幾乎完成。沒有學習引導，沒有辦法實現這一點嗎？ – user3619057

我增加了位置：固定;和z-索引：99;到你的代碼。你是在找這個嗎？

#box1 { 
 
    float: left; 
 
    position:fixed; 
 
    display:inline-block; 
 
    padding-left:50px; 
 
    border:solid 1px red; 
 
    background-color:red; 
 
    z-index:99; 
 
} 
 

 
#box2 { 
 
    width: 20em; 
 
    height:500px; 
 
    margin: 0 auto 1em auto; 
 
    border:solid 1px blue; 
 
}

<div id="box1"> 
 
    <p><strong>About me</strong></p> 
 
    <img src ="images/hack.jpg"/> 
 
    <p><strong>Image Courtesy Bob Marley</strong> 
 
    <a href="www.google.com">www.google.com</a></p> 
 
</div> 
 

 
<div id="box2"> 
 
    <p> 
 
    Hi there! 
 
    <br> 
 
    I'm bob, a freelance designer and developer<br> 
 
    I'm bob, a freelance designer and developer<br> 
 
    I'm bob, a freelance designer and developer<br> 
 
    I'm bob, a freelance designer and developer<br> 
 
    I'm bob, a freelance designer and developer<br> 
 
    I'm bob, a freelance designer and developer<br> 
 
    I'm bob, a freelance designer and developer<br> 
 
    I'm bob, a freelance designer and developer<br> 
 
    I'm bob, a freelance designer and developer<br> 
 
    <br><br><br> 
 
    </p> 
 
</div>

來源

2016-05-02 08:14:23 aghilpro

我想要它，所以當你放大/縮小box1時，它相對於box2保持其確切的位置，就像它現在沒有縮放。 – user3619057

@ user3619057你是什麼意思變焦？你的意思是滾動頁面？ – aghilpro

這很難解釋。看看Riot Zeast隊長的代碼。這傢伙有它非常接近，但box2改變它的位置，而box1保留它，而我想要它反過來當我放大/縮小頁面。 – user3619057

試試這個： -


 

 
#box1 { 
 
    float: left; 
 
    position:absolute; 
 
    padding-left:50px; 
 
} 
 

 
#box2 { 
 
    position: absolute; 
 
    padding-top: 160px; 
 
    text-align: center; 
 
    width: 20em; 
 
    margin: 0 auto 1em auto; 
 
}

<html> 
 
    <head> 
 
     <title>TODO supply a title</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     
 
    </head> 
 
    <body> 
 
     <div id="box1"> 
 
<p><strong>About me</strong></p> 
 
<img src ="images/hack.jpg"/> 
 
<p><strong>Image Courtesy Bob Marley</strong><br></br> 
 
<a href="www.google.com">www.google.com</a></p> 
 
</div> 
 

 
<div id="box2"> 
 
<p> 
 
Hi there! 
 
<br></br> 
 
I'm bob, a freelance designer and developer<br> 
 
I'm bob, a freelance designer and developer<br> 
 
I'm bob, a freelance designer and developer<br> 
 
I'm bob, a freelance designer and developer<br> 
 
I'm bob, a freelance designer and developer<br> 
 
I'm bob, a freelance designer and developer<br> 
 
I'm bob, a freelance designer and developer<br> 
 
I'm bob, a freelance designer and developer<br> 
 
I'm bob, a freelance designer and developer<br> 
 
<br><br><br> 
 
</p> 
 
</div> 
 
    </body> 
 
</html>

讓我知道，如果它不能正常工作。

來源

2016-05-02 08:26:16

不，對不起。看看描述，我更新了它。 – user3619057

如何居中一個div並讓另一個div浮動到左邊？

回答

相關問題