ترتيب divs بجانب بعضها باستخدام CSS.

لعرض الـ divs بجانب بعضهما البعض، يمكنك استخدام خاصية display: inline-block; مع تعديل بسيط في هيكل الـ divs. يجب أن يكون لديك div أب محيط يحتوي على الـ divs التي تريد عرضها بجانب بعضها البعض. يمكنك تجربة الكود التالي:

htmlCopy code
<div style="display: flex;">
    <div id="quarterlistpanel" style="display:None; margin-right: 10px;">
        <apex:selectList id="QuarterSelList" size="1" title="List of Quartersin year" style="padding: 2px 4px; margin: 4px 2px;">
            <apex:selectOption itemvalue="Quarters" itemLabel="Select a Quarter" />
            <apex:selectOption itemvalue="Q1" itemLabel="Quarter 1" />
        apex:selectList>
    div>
    <div id="buttonpanel" style="display:None; float:left;">
        <apex:commandButton action="{!selectQuarter}" value="Go!" status="actStatusId2" reRender="pgBlckId,panelrender,panelrender1,panelrender14,panelrender15,panelrender24,panelrender23,panelrender12,panelrender13,panelrender2,panelrender21,panelrender22" id="button2" />
        <apex:actionStatus id="actStatusId2" title="This is the status for loading image">
            <apex:facet name="start">
                <img src="/img/loading.gif" width="25" height="25" align="bottom" title="Loading" />
                <h3> Loading..h3>
            apex:facet>
        apex:actionStatus>
    div>
div>

هذا الكود يستخدم خاصية display: flex; للعنصر الأب الذي يحتوي على الـ divs الاثنين ليتيح لهما العرض بجانب بعضهما البعض. يرجى ملاحظة أنه من الأفضل استخدام أنماط CSS خارجية بدلاً من الاستخدام المباشر للأنماط في العناصر لتحسين صيانة الكود وقابلية إعادة الاستخدام.

بالطبع! يمكنك استخدام الخاصية display: inline-block; بدلاً من display: flex; لعرض الـ divs بجانب بعضها. إليك الكود المحدث:

htmlCopy code
<div>
    <div id="quarterlistpanel" style="display: inline-block; margin-right: 10px;">
        <apex:selectList id="QuarterSelList" size="1" title="List of Quartersin year" style="padding: 2px 4px; margin: 4px 2px;">
            <apex:selectOption itemvalue="Quarters" itemLabel="Select a Quarter" />
            <apex:selectOption itemvalue="Q1" itemLabel="Quarter 1" />
        apex:selectList>
    div>
    <div id="buttonpanel" style="display: inline-block;">
        <apex:commandButton action="{!selectQuarter}" value="Go!" status="actStatusId2" reRender="pgBlckId,panelrender,panelrender1,panelrender14,panelrender15,panelrender24,panelrender23,panelrender12,panelrender13,panelrender2,panelrender21,panelrender22" id="button2" />
        <apex:actionStatus id="actStatusId2" title="This is the status for loading image">
            <apex:facet name="start">
                <img src="/img/loading.gif" width="25" height="25" align="bottom" title="Loading" />
                <h3> Loading..h3>
            apex:facet>
        apex:actionStatus>
    div>
div>

هذا الكود يستخدم display: inline-block; لكل من الـ divs لجعلهما يعرضان بجانب بعضهما البعض. يمكنك تعديل الهوامش (margin) والتباعد بين العناصر حسب احتياجات التصميم الخاصة بك.