@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;}這是一個 React 應用程序，我試圖讓 condiv 向右浮動，但由于某種原因它向左浮動。我無法判斷是否有其他屬性干擾了它，但我將不勝感激任何見解。我讀過也許我應該將 condiv 和 home 分成 2 個不同的 div，但這并沒有改變任何東西。我的condiv主頁的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>可以在這里找到我的整個存儲庫的鏈接：https://github.com/ChadLei/chadei
3 回答
白豬掌柜的
TA貢獻1893條經(jīng)驗 獲得超10個贊
因此，從您的存儲庫中，我注意到您使用的是 strinctMode強文本，這甚至不允許我渲染您的應用程序。當我刪除嚴格模式后，我就遇到了你的問題。作為解決方案：如果您只想在頁面右側呈現(xiàn)社交圖標，請執(zhí)行以下操作：
? ? .social{
width: 100%;
justify-content: flex-end;
}
如果您想將徽標和社交媒體都呈現(xiàn)在右側，請應用此：
.home{
justify-content: flex-end;
flex-direction: row;
}
請注意，您將 float 與 flex 一起使用，CSS 不允許您這樣做...
慕哥6287543
TA貢獻1831條經(jīng)驗 獲得超10個贊
通過查看你的代碼，我發(fā)現(xiàn)可能存在一些錯誤。 1.你保持寬度：100％，所以它將覆蓋整個屏幕，因為 Div 是一個塊標簽，所以它將覆蓋屏幕的整個寬度。2. 由于上述原因，您的 html 內容將默認位于左側。
解決方案：對于解決方案，您可以減小 div 的寬度，或者您可以在此處提供完整的代碼，以便我們可以看到主體中是否存在另一個元素，或者我們如何解決這個問題！
希望這會有所幫助，如果沒有，請?zhí)峁┱麄€情況，是的，請檢查您的瀏覽器開發(fā)工具并檢查實際發(fā)生的情況！
謝謝你！
拉莫斯之舞
TA貢獻1820條經(jīng)驗 獲得超10個贊
您好，我使用了您的 css 和以下 div。它完美地顯示在右側。請檢查其他地方以查找問題。
<div className='condiv home'>
<img src={profilePic} className='profilepic'></img>
</div>- 3 回答
- 0 關注
- 242 瀏覽
添加回答
舉報
0/150
提交
取消