@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,700&display=swap');:root{ --sidebar-flex:1.5; --condiv-flex:6; --fontsize-p:1.2rem; --fontsize-nav:1.6rem; --typing-font:3rem;}* { margin:0; padding: 0;}body { font-family: "Montserrat", Arial, sans-serif; background: #fff; background: purple; font-size: 15px; line-height: 1.8; font-weight: 500; color: #999999;}.App { display: flex; width: 100vw; min-height: 100vh;}/* .condiv class is for the right side content container*/.condiv{ background: #fff; width: 100%; float: right; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}@media (min-width: 992px) { .condiv { width: 75%;}}/* For Home Page */.home { display: flex; justify-content: center; flex-direction: column; align-items: center;}這是一個(gè) React 應(yīng)用程序，我試圖讓 condiv 向右浮動(dòng)，但由于某種原因它向左浮動(dòng)。我無(wú)法判斷是否有其他屬性干擾了它，但我將不勝感激任何見解。我讀過(guò)也許我應(yīng)該將 condiv 和 home 分成 2 個(gè)不同的 div，但這并沒(méi)有改變?nèi)魏螙|西。我的condiv主頁(yè)的div是：<div className='condiv home'> <img src={profilePic} className='profilepic'></img> <ReactTypingEffect className='typingeffect' text={["Hi, I'm Chad"]} speed={100} eraseDelay={700}/> <Social/></div>可以在這里找到我的整個(gè)存儲(chǔ)庫(kù)的鏈接：https://github.com/ChadLei/chadei
3 回答
白豬掌柜的
TA貢獻(xiàn)1893條經(jīng)驗(yàn) 獲得超10個(gè)贊
因此，從您的存儲(chǔ)庫(kù)中，我注意到您使用的是 strinctMode強(qiáng)文本，這甚至不允許我渲染您的應(yīng)用程序。當(dāng)我刪除嚴(yán)格模式后，我就遇到了你的問(wèn)題。作為解決方案：如果您只想在頁(yè)面右側(cè)呈現(xiàn)社交圖標(biāo)，請(qǐng)執(zhí)行以下操作：
? ? .social{
width: 100%;
justify-content: flex-end;
}
如果您想將徽標(biāo)和社交媒體都呈現(xiàn)在右側(cè)，請(qǐng)應(yīng)用此：
.home{
justify-content: flex-end;
flex-direction: row;
}
請(qǐng)注意，您將 float 與 flex 一起使用，CSS 不允許您這樣做...
慕哥6287543
TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超10個(gè)贊
通過(guò)查看你的代碼，我發(fā)現(xiàn)可能存在一些錯(cuò)誤。 1.你保持寬度：100％，所以它將覆蓋整個(gè)屏幕，因?yàn)?Div 是一個(gè)塊標(biāo)簽，所以它將覆蓋屏幕的整個(gè)寬度。2. 由于上述原因，您的 html 內(nèi)容將默認(rèn)位于左側(cè)。
解決方案：對(duì)于解決方案，您可以減小 div 的寬度，或者您可以在此處提供完整的代碼，以便我們可以看到主體中是否存在另一個(gè)元素，或者我們?nèi)绾谓鉀Q這個(gè)問(wèn)題！
希望這會(huì)有所幫助，如果沒(méi)有，請(qǐng)?zhí)峁┱麄€(gè)情況，是的，請(qǐng)檢查您的瀏覽器開發(fā)工具并檢查實(shí)際發(fā)生的情況！
謝謝你！
拉莫斯之舞
TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超10個(gè)贊
您好，我使用了您的 css 和以下 div。它完美地顯示在右側(cè)。請(qǐng)檢查其他地方以查找問(wèn)題。
<div className='condiv home'>
<img src={profilePic} className='profilepic'></img>
</div>- 3 回答
- 0 關(guān)注
- 265 瀏覽
添加回答
舉報(bào)
0/150
提交
取消